本节案例
image.png
表单的作用
HTML 表单用于收集用户输入。
表单form
<form> 元素定义 HTML 表单，里面需要有各种表单元素
实例：
<form action="login.php" method="post">
姓名: <input type="text" name="name" value="Mickey" placeholder="请输入用户名">
<br>
密码: <input type="password" name="password" value="Mouse">
<br><br>
<input type="submit" value="登录">
</form>
<p>如果您点击提交，表单数据会被发送到名为login.php的页面。</p>
image.png
代码解析：
- form里面需要各种表单元素，如<input>、<textarea>等。form常见属性与属性值有:
- method：方法，用于规定在提交表单时所用的 HTTP 方法。 method = get（默认） | post |…… , 字面意思用于获取和传输。当然，他们还有很多其它的差别，当您使用 get时，表单数据在页面地址栏中是可见的，如表单提交是被动的（比如搜索引擎查询），并且没有敏感信息可以用get。post的安全性更好，因为在页面地址栏中被提交的数据是不可见的。如果表单正在更新数据，或者包含敏感信息（例如密码）可以用post。
- action：动作，用于规定提交表单的目的地。如action="banzhang.php"则将表单提交给banzhang.php来处理，如果值为空，则默认是本页。
- 其它属性：enctype（编码方式）、target（目标打开方式）等等。
- input是最常见的表单元素，可以提供用户一个输入界面。<input> 元素根据不同的 type 属性，可以变化为多种形态。常见属性与属性值有:
- type = text (默认) | password | radio | checkbox | file | image | hidden ，分别表示：文本框（默认）| 密码 | 单选 | 复选 | 文件框 | 图像域 | 隐藏域
- name ，表单元素的名字，通常是必备属性。
- value ，表单元素的值，通常根据需求来决定表单元素内是否有value属性和对应的值。
- placeholder ，表单元素占位符，当表单元素value为空时显示其值，不为空时隐藏其值。是一个html5新增属性。
- tabindex ，设置访问者在页面中按tab键的顺序。 在没有定义属性值的时候，tabindex的默认值是0。如果将tabindex设为负值（tabindex=”-1”），这个元素会被排除在tab键切换的范围之外。tabindex不仅可以用于输入框间的切换，也可以用于链接之间的切换。
- 其它属性：checked（单选复选框默认是否选中）、disabled（不可用，常用于按钮）、maxlength（文本框最大字符数）、size(元素宽度或高度) 、readonly(内容只读) 。
常见表单元素的示例图：
image.png
注意：
1.html5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。同时还新增了按钮的formaction属性，动态的让表单提交到不同的URL。
<form id="foo" method="post"></form>
<input name="name" form="foo" >
<input type="password" name="password" form="foo" >
<input type="submit" value="注册" form="foo" formaction="reg">
<input type="submit" value="登录" form="foo" formaction="log">
2.html5中新增了type属性值：email、URL、datetime、datetime-local、date、month、week、time、number、range、color 、search、tel等
3.html5中新增属性：
- Autocomplete：自动完成功能.记录用户之前输入的内容，并在下次输入时自动提示完成输入。属性值： on | off，既可以在form表单上使用，对整张表单的所有控件进行自动完成的开关，也可以在input上使用，对特定输入框进行修改。绝大部分浏览器，默认值是on(开启)。
- Autofocus：自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。
- Form：所属表单。通过form表单的id，确定此input对应哪张表单。
- Required：意为必填。required="required" 设置input必填，否则阻止提交。
- Pattern：使用正则表达式验证input的模式（须了解正则表达式）
<p>正则表单式用法示例：</p>
<form>
手机号：<input type="text" name="tel" pattern="1[0-9]{10}">
<input type="submit">
</form>
需要注意的表单元素用法
单选按钮 radio:
- 同组radio的name属性的值必须相同，此时实现只能单选效果（“互斥”）。
- 为更好的鼠标体验及方便以后的CSS实现，实际中通常使用lable for id的用法。
性别：
<input type="radio" id="sex_male" name="sex" value="male">
<label for="sex_male">男</label>
<input type="radio" id="sex_female" name="sex" value="female">
<label for="sex_female">女</label>
<!--name相同，只能选男或女；有了label for id，文字和表单元素捆在一起，单击文字可以等同于单击表单元素，注所有表单元素都可以通过label绑定-->
复选按钮 radio:
- 同组radio的name属性的值必须相同。
- 为更好的鼠标体验及方便以后的CSS实现，实际中也通常使用label for id的用法。
- 注： label也可显式关联文本，即用label包括input和文本。
爱好：
<input type="checkbox" id="f_basketball" name="favorites" value="basketball">
<label for="f_basketball">篮球</label>
<input type="checkbox" id="f_football" name="favorites" value="football">
<label for="f_football">足球</label>
<label>
<input type="checkbox" name="favorites" value="volleyball">排球
</label>
其它表单元素
下拉列表select
select元素定义下拉列表，option元素定义待选择的选项。
<select name="cars" size="4" multiple> <!-- size = 4 表示下拉列表尺寸为4，multiple 表示可多选 -->
<option value="volvo" selected>Volvo</option>
<option value="bmw">BMW</option>
<option value="benz">Benz</option>
<option value="audi">Audi</option>
</select>
<select name="cars" size="4" multiple>
<optgroup label="IE系列"> <!-- optgroup对下拉列表进行分组 -->
<option value="Internet Explorer">IE6</option>
<option value="Internet Explorer">IE7</option>
<option value="Internet Explorer">IE8</option>
<option value="Internet Explorer">IE9.0及以上</option>
</optgroup>
<optgroup label="非IE系列"> <!-- optgroup对下拉列表进行分组 -->
<option value="Firefox">BMW</option>
<option value="Chrome">BMW</option>
<option value="Opera">BMW</option>
<option value="Safari">BMW</option>
</optgroup>
</select>
image.png
文本域 textarea
textarea元素定义多行输入字段（文本域）：
<textarea name="message" rows="10" cols="30" placeholder="请输入您的留言！">
您的留言很宝贵！
</textarea>
按钮button
button 元素定义可点击的按钮。
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
- 在 button 元素内部，可以放置文本或图像。这是<button>与使用 input 元素创建的按钮的不同之处。
- 二者相比较， <button> 控件提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
- 唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
- 请始终为按钮规定 type 属性：Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。
HTML5 表单元素
HTML5 增加了如下表单元素：
- <datalist>
- <keygen>
- <output>
<datalist> 元素为 <input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。简单的记忆：[input] list for [datalist] id。
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
<p><b>注释：</b>Safari 或 IE9（以及更早的版本）不支持 datalist 标签。</p>
当输入内容或点击三角形按钮时会出现提示
image.png
作业：
1.利用表格本节所学的表单知识完成本节开头的表单项目（*必填用required属性）
2.完成如下练习：
image.png
练习2参考代码：
<form action="Test.html" method="get">
<fieldset>
<legend>HTML5新增表单元素</legend>
<table>
<tr>
<td>邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>地址</td>
<td><input type="url" name="url"></td>
</tr>
<tr>
<td>日期</td>
<td><input type="date" name="data"></td>
</tr>
<tr>
<td>时间</td>
<td><input type="time" name="time"></td>
</tr>
<tr>
<td>月份</td>
<td><input type="month" name="month"></td>
</tr>
<tr>
<td>星期</td>
<td><input type="week" name="week"></td>
</tr>
<tr>
<td>滑动条</td>
<td><input type="range" name="range"></td>
</tr>
<tr>
<td>颜色</td>
<td><input type="color" name="color"></td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table>
</fieldset>
</form>
