HTML笔记（HTML元素-表单）

表单为网页提供一种交互功能，可用于搜集用户输入的不同类型的数据

1 表单

制作表单可以类比一下制作表格，列表。举例子制作表格时，一开始要定义<table>元素标记开始定义表格，同样的制作表单，也是要定义一个元素标记开始定义表单，而这个元素就是<form>元素了。

<form>元素标记开始定义表单，几乎所有的块级元素元素都可以放在<form> 元素里。而真正实现提供用户输入信息不同方法的表单元素（如选项菜单），也就是内嵌在这里面了。
<form>元素有action和method属性，用来定义服务器脚本运作的。
那么，表单里可以有些什么呢？

1.1 <input>元素

<input> 表单元素在表单世界里扮演很多角色，说是最重要的表单元素也不为过了。<input>元素是 空元素，而且有很多形态，根据属性tpye的不同而不同。

每个输入字段必须设置一个 name 属性，因为服务器脚本通常会使用到这个名字。

1.1.1 文本输入（type=”text”）

当属性tpye="text"时，用于定义输入单行文本，同时它还有一些可选属性：

• value 属性：定义初始值，默认值，提交会成功（<input>输入文本类型通用）
• placeholder 属性：定义提示值，为填写表单的人提供一些提示，一旦点击该文本域，占位文本会消失，提交不会成功（<input>输入文本类型通用）
• required 属性：这是适合于所有表单控件的属性，定义这个域是必要的（下面的元素元素介绍不再重复）
• maxlength 属性：定义最大字符数（对<textarea>元素无效）
• size 属性：定义表单显示大小（最大的容纳字符数）
• list 属性：通过定义<datalist> 元素，实现输入文本下拉预定义列表，list 属性必须为<datalist> 元素的id

    <form>        <p>        名字：<input type="text" name="abc" size="400" value="123"/>        </p>    </form>

定义list 属性例子：

<form>    <input list="browsers" type="text" />    <datalist id="browsers">        <option value="Internet Explorer">        <option value="Firefox">        <option value="Chrome">        <option value="Safari">    </datalist> </form>

1.1.2 单选钮输入

当属性tpye="radio"时，用于定义包含单选钮控件（相关选项共用一个name ）。
它还有一个必选属性value 来定义当前按钮的意义值，同时它还有个可选属性checked ，用来指定默认值。

<form>    <span>性别：</span><label for='man'>男</label><input type="radio" name="sex" value="man" id="man"><label for="women">女</label><input type="radio" name="sex" value="women" id="women"></form>

1.1.3 复选框输入

当属性tpye="checkbox"时，用于定义包含多个按钮只能单选的控件（相关选项共用一个name ）。
复选框与单选钮类似，都是拥有必选属性value 以及可选属性checked。

<form>        <span>性别：</span><label for="man">男</label><input type="checkbox" name="sex" value="man" checked /> <label for="man">女</label><input type="checkbox" name="sex" value="woman"/></form><!-- 注意段落符号 -->

1.1.4 密码输入

当属性tpye="passwords"时，与输入文本类似，只是在文本输入时会自行添加掩码。

1.1.5 提交输入

当属性tpye="submit"时，定义提交按钮，用来提交表单给服务器脚本，其中value 属性值为按钮显示名字。

<form>        <p>            <input type="submit" value="提交"  />         </p></form>

1.1.6 定义按钮

当属性tpye="button"时，定义按钮，注意这里的定义按钮不是提交表单按钮，多数情况下是用于通过 JavaScript 启动服务器脚本

<input type="button" onclick="alert('Hello World!')" value="Click Me!"><!-- 注意并没有form元素 -->

同时还有一些HTML5增加的新类型

1.1.7 数字输入

当属性tpye="number"时，用于限制只能输入数字，而且通过一些可选属性还可以指定数字的范围。

• max 属性：定义最大值
• min 属性：定义最小值
• step 属性：定义数值间隔

<form>        <p>            <input type="number" name="sex" placeholder="2"  />         </p></form>

1.1.8 其他类型的<input>元素

<input>元素的type值还有很多，诸如 email，color，tel，url，range，date等等。想进一步了解可到W3C。

1.1.9 <label>标签

<label>标签可用于为 input 元素定义标注，当点击<label>定义的标注文本时，会自动聚焦到相应的input元素，其用法很简单，只要设置<label>标签的for属性与input标签中的id属性相等。
如：

<label for="age">性别：</label><input type="text" name="age" id="age" />

---

除了<input> 元素，<form> 元素还有一下内嵌表单元素。

1.2 文本区（textarea）

<textarea> 元素与<input> 元素的文本输入不同，文本区可以输入多行文本，不能限制字数，同时不是空元素，元素内容为文本区初始文本。而其中可选属性

• rows 属性：定义文本区行数，超过会生成滚动条
• cols 属性：定义文本区列数，超过会生成滚动条
• width属性使用百分数可以根据父元素的宽度改变

<form>        <p>            <textarea name="article" >有蚊子。。</textarea>         </p></form>

1.3 下拉列表选择（select）

<select> 元素会在页面中定义一个下拉列表的菜单控件，要与<option> 元素结合使用。
注意的是<option> 元素不是一个空元素（结合<input> 元素的选项按钮，试想一下，一个选项要有显示给用户的名字同时也要有返回服务器的返回值，而<option> 元素的value属性值为返回值，元素内容为显示给用户的名字。）

<form>    <select name="food">        <option value="apple">苹果</option>        <option value="banana" >香蕉</option>        <option value="orange">橙子</option>    </select></form>

1.5 按钮（button）

<button>元素与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容，比方说按钮可以是文本或图像等。

<form>    <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-comment"></i> 发表评论</button></form>