HTML 表单
HTML 表单用于搜集不同类型的用户输入
HTML 表单
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容,如文本域 、下拉列表 、单选框 、复选框等等
表单使用表单标签 <form> 来设置
<form>. *input 元素* .</form>
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签 ( <input> )
输入类型是由类型属性(type)定义的,大多数经常被用到的输入类型如下
文本域
<input type="text"> 标签定义了文本域
当用户要在表单中键入字母、数字等内容时,就会用到文本域
<form> <p>First name: <input type="text" name="firstname"></p> <p>Last name: <input type="text" name="lastname"></p> </form>
浏览器显示如下
注意: 表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是 20 个字符
密码字段
<input type="password"> 标签定义了密码字段
<form>Password: <input type="password" name="pwd"> </form>
浏览器显示如下
注意: 密码字段字符不会明文显示,而是以星号或圆点替代
单选按钮
<input type="radio"> 标签定义了表单单选框选项
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
浏览器显示如下
复选框
<input type="checkbox"> 定义了复选框
用户需要从若干给定的选择中选取一个或若干选项
<form> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car"> I have a car </form>
浏览器显示如下
提交按钮
<input type="submit"> 定义了提交按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件
表单的动作属性定义了目的文件的文件名
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
<form name="input" action="/dy/html/getpost" method="get"> <p>用户名:<input type="text" name="user"></p> <p><input type="submit" value="Submit"></p> </form>
浏览器显示如下
可以在上面的文本框内键入几个字母,然后点击确认按钮
那么输入数据会传送到 "/dy/html/getpost" 的页面,该页面将显示出输入的结果
范例
范例 | 描述 |
---|---|
创建文本字段 (Text field) | 演示了如何在 HTML 页面创建文本域 用户可以在文本域中写入文本 |
创建密码字段 | 演示了如何创建 HTML 的密码域 |
更多范例
范例 | 描述 |
---|---|
单选按钮(Radio buttons) | 演示了如何在 HTML 中创建单选按钮 |
复选框(Checkboxes) | 演示了如何在 HTML 页中创建复选框 用户可以选中或取消选取复选框 |
简单的下拉列表 | 演示了如何在 HTML 页面中创建简单的下拉列表框 下拉列表框是一个可选列表 |
预选下拉列表 | 演示了如何创建一个简单的带有预选值的下拉列表 |
文本域(Textarea) | 演示了如何创建文本域(多行文本输入控件) 用户可在文本域中写入文本 可写入字符的字数不受限制 |
创建按钮 | 演示了如何创建按钮。可以对按钮上的文字进行自定义 |
表单范例
范例 | 描述 |
---|---|
带边框的表单 | 演示了如何在数据周围绘制一个带标题的框 |
带有输入框和确认按钮的表单 | 演示了如何向页面添加表单 表单包含两个输入框和一个确认按钮 |
带有复选框的表单 | 表单包含两个复选框和一个确认按钮 |
带有单选按钮的表单 | 表单包含两个单选框和一个确认按钮 |
从表单发送电子邮件 | 演示了如何从表单发送电子邮件 |
HTML 表单标签
new 表示 HTML5 新标签
标签 | 描述 |
---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 <input> 元素的标签,一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素,并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist> new | 指定一个预先定义的输入控件选项列表 |
<keygen> new | 定义了表单的密钥对生成器字段 |
<output> new | 定义一个计算结果 |