Web 前端学习笔记之 HTML 入门（3）

HTML 表单

HTML 表单用于搜集不同类型的用户输入。<form>标签定义了HTML表单。

<form action="/echo" method="POST" name="myForm">  <p>用户名：<input type="text" name="username"></p>  <p>密码：<input type="password" name="password"></p>  <p><button type="submit">登录</button></p></form>

form元素中的属性列表

属性 值 描述 accept-charset UTF-8/ISO-8859-1/gb2312 规定服务器可处理的表单数据字符集 action URL 规定当提交表单时向何处发送表单数据 method GET/POST 规定用于发送表单数据的 HTTP 方法 target _blank/_self（默认）/_parent/_top/framename 规定在何处打开 action URL autocomplete on/off 规定是否启用表单的自动完成功能（默认开启） name form_name 规定表单的名称 novalidate novalidate 如果使用该属性，则提交表单时不进行验证

说明：

1. form元素是块级元素，其前后会产生折行
2. method属性：
   
   • 如果表单提交是被动的，并且没有敏感信息，一般使用GET（默认方法）；其表单数据在页面地址栏中是可见的
   • 如果表单正在更新数据或者包含敏感信息，一般使用POST；其安全性更加，在页面地址栏中被提交的数据是不可见的

---

表单设计要领:

• 帮助用户不出错
• 尽早提示错误
• 扩大选择/点击区域
• 控件较多时要分组
• 主要动作和次要动作

下面一一介绍 HTML 的表单元素。

---

input 元素

<input>标签用于搜索用户信息。
<input>元素是最重要的表单元素，它根据不同的type属性值有很多形态。
下表列出了type属性值

type属性值 描述 button 定义可点击按钮 checkbox 定义复选框 file 定义输入字段和 “浏览”按钮，供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 password 定义密码字段，该字段中的字符被掩码 radio 定义单选按钮 reset 定义重置按钮，重置按钮会清除表单中的所有数据 submit 定义提交按钮，提交按钮会把表单数据发送到服务器 text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符 date 选取日、月、年 month 选取月、年 week 选取周和年 time 选取时间（小时和分钟） datetime 选取时间、日、月、年（UTC 时间） datetime-local 选取时间、日、月、年（本地时间）

更多HTML5 Input类型请参照该网站。

其他重要属性如下表所示

属性 值 描述 alt text 定义图像输入的替代文本 autocomplete on/off 规定是否使用输入字段的自动完成功能 autofocus autofocus 规定输入字段在页面加载时是否获得焦点 checked checked 规定此 input 元素首次加载时应当被选中 disabled disabled 当 input 元素加载时禁用此元素（变灰） maxlength number 规定输入字段中的字符的最大长度 max、min number/date 规定输入字段的最大值、最小值 multiple multiple 如果使用该属性，则允许一个以上的值 pattern regexp_pattern 规定输入字段的值的模式或格式 placeholder text 规定帮助用户填写输入字段的提示 readonly readonly 规定输入字段为只读 required required 指示输入字段的值是必需的 size number_of_char 定义输入字段的宽度 src URL 定义以提交按钮形式显示的图像的 URL value value 规定 input 元素的值

说明：

1. 对于 <input type="text"> 和 <input type="password">，size 属性定义的是可见的字符数。而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度，它是一个可视化的设计属性
2. 对于type值为checkbox或radio的input，可以在其外面添加label标签，方便勾选操作

<label>    <input type="checkbox" name="fruit" value="apple">苹果</label>

更多关于<input>标签的信息可参照该网站。

---

select 元素

定义和用法
select 元素可创建单选或多选菜单。
<select> 元素中的 <option> 标签用于定义列表中的可用选项。
实例

<select>  <option value ="volvo">Volvo</option>  <option value ="saab">Saab</option>  <option value="opel">Opel</option>  <option value="audi">Audi</option></select>

select元素中的属性列表

属性 值 描述 autofocus autofocus 规定在页面加载后文本区域自动获得焦点 disabled disabled 规定禁用该下拉列表 form form_id 规定文本区域所属的一个或多个表单 multiple multiple 规定可选择多个选项 name name 规定下拉列表的名称 size number 规定下拉列表中可见选项的数目

<select>标签还可以与<optgroup>标签一起使用来把相关的选项组合在一起。

<label>目的城市：</label><select name="country">  <optgroup label="美洲">    <option>多伦多</option>    <option>温哥华</option>    <option>旧金山</option>    <option>洛杉矶</option>    <option>纽约</option>    <option>华盛顿</option>    <option>里约热内卢</option>  </optgroup>  <optgroup label="亚洲">    <option>北京</option>    <option>上海</option>    <option>首尔</option>    <option>东京</option>    <option>香港</option>  </optgroup>  <optgroup label="欧洲">    <option>伦敦</option>    <option>巴黎</option>    <option>马德里</option>    <option>柏林</option>    <option>雅典</option>  </optgroup></select>

说明：

1. optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易
2. option 元素定义下拉列表中的一个选项（一个条目）

---

textarea 元素

定义和用法
<textarea> 标签定义多行的文本输入控件。
实例

<textarea rows="3" cols="20">可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。</textarea>

textarea元素中的属性列表

属性 值 描述 autofocus autofocus 规定在页面加载后文本区域自动获得焦点 disabled disabled 规定禁用该文本区 form form_id 规定文本区域所属的一个或多个表单 name name 规定文本区域的名称 cols number 规定文本区内的可见宽度 rows number 规定文本区内的可见行数 maxlength number 规定文本区域的最大字符数 placeholder text 规定描述文本区域预期值的简短提示 readonly readonly 规定文本区为只读 required required 规定文本区域是必填的 wrap hard/soft 规定当在表单中提交时，文本区域中的文本如何换行

button 元素

定义和用法
<button> 标签定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

说明：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。

实例

<form action="/example/html/form_action.asp" method="get">  First name: <input type="text" name="fname" /><br />  Last name: <input type="text" name="lname" /><br />  <button type="submit" value="Submit">Submit</button>  <button type="reset" value="Reset">Reset</button></form>

更多关于<button>标签的信息可参照该网站。

---

其它表单元素

HTML5 增加了如下表单元素：

• <datalist>
• <keygen>
• <output>

datalist 元素

定义和用法
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。

注：

1. <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性
2. 所有主流浏览器都支持 <datalist> 标签，除了 Internet Explorer 和 Safari

实例：通过 <datalist> 设置预定义值的 <input> 元素

<form action="action_page.php"><input list="browsers"><datalist id="browsers">   <option value="Internet Explorer">   <option value="Firefox">   <option value="Chrome">   <option value="Opera">   <option value="Safari"></datalist> </form>

keygen 元素

定义和用法
<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

注：所有主流浏览器都支持 <keygen> 标签，除了 Internet Explorer 和 Safari。

实例

<form action="demo_keygen.asp" method="get">Username: <input type="text" name="usr_name" />Encryption: <keygen name="security" /><input type="submit" /></form>

keygen元素中的属性列表

属性 值 描述 form formname 定义该 keygen 字段所属的一个或多个表单 keytype disabled 定义 keytype，rsa 生成 RSA 密钥 name fieldname 定义 keygen 元素的唯一名称

output 元素

定义和用法
<output> 标签定义不同类型的输出，比如脚本的输出。

注：Internet Explorer 8 以及更早的版本不支持 <output> 标签。

实例

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0   <input type="range" id="a" value="50">100   +<input type="number" id="b" value="50">   =<output name="x" for="a b"></output></form> 

output元素中的属性列表

属性 值 描述 for element_id 定义输出域相关的一个或多个元素 form form_id 定义输入字段所属的一个或多个表单 name name 定义对象的唯一名称

参考资料

1. w3school