HTML 表单与输入实例
摘要：HTML 表单与输入实例
文本域(Text fields)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
密码域
本例演示如何创建 HTML 的密码域。
复选框
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
单选按钮
本例演示如何在 HTML 中创建单选按钮。
简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
另一个下拉列表
本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。）
文本域(Textarea)
本例演示如何创建一个文本域（多行文本输入控件）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。
创建按钮
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
Fieldset around data
本例演示如何在数据周围绘制一个带标题的框。
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
html代码
运行代码
<html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastname"> </form> </body> </html>
本例演示如何创建 HTML 的密码域。
html代码
运行代码
<html> <body> <form> 用户： <input type="text" name="user"> <br /> 密码： <input type="password" name="password"> </form> <p> 请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。 </p> </body> </html>
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
html代码
运行代码
<html> <body> <form> 我喜欢自行车： <input type="checkbox" name="Bike"> <br /> 我喜欢汽车： <input type="checkbox" name="Car"> </form> </body> </html>
本例演示如何在 HTML 中创建单选按钮。
html代码
运行代码
<html> <body> <form> 男性： <input type="radio" checked="checked" name="Sex" value="male" /> <br /> 女性： <input type="radio" name="Sex" value="female" /> </form> <p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p> </body> </html>
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
html代码
运行代码
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。）
html代码
运行代码
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
本例演示如何创建一个文本域（多行文本输入控件）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。
html代码
运行代码
<html> <body> <textarea cols="30" rows="5"> 领先的 Web 技术教程 - 全部免费 在w3school，你可以找到你所需要的所有的网站建设教程。 从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和WAP。 </textarea> <p>您无法对本例进行编辑，因为我们的在线编辑器使用 textarea 进行输入， 而浏览器不允许 textarea 中存在另一个 textarea。</p> </body> </html>
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
html代码
运行代码
<html> <body> <form> <input type="button" value="Hello world!"> </form> </body> </html>
本例演示如何在数据周围绘制一个带标题的框。
html代码
运行代码
<!DOCTYPE HTML>
<html>
<body>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>
相关文章