常用表单元素

                form:定义供用户输入的表单。

                fieldset:定义域。即输入区加有文字的边框。

                legend：定义域的标题，即边框上的文字。

                label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。

                input:定义输入域，常用。可设置type属性，从而具有不同功能。

                textarea:定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。

                button:定义一个按钮。

                select:定义一个选择列表，即下拉列表。

                option:定义下拉列表中的选项。

表单的种类

文本框: 文本框是一种让访问者自己输入内容的表单对象，通常被用来填写信息或者简短的回答，如姓名、地址等。

代码格式：<input type="text" name="..." size="..." maxlength="..." value="..."

 属性解释：

                type="text"定义单行文本输入框；

                name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

                size属性定义文本框的宽度，单位是单个字符宽度；

                maxlength属性定义最多输入的字符数。

                value属性定义文本框的初始值

多行文本框: 也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

代码格式：<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>

属性解释：

                name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

                cols属性定义多行文本框的宽度，单位是单个字符宽度；

                rows属性定义多行文本框的高度，单位是单个字符宽度；

                wrap属性定义输入内容大于文本域时显示的方式

密码框: 是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

代码格式：<input type="password" name="..." size="..." maxlength="...">

               属性解释：

                type="password"定义密码框；

                name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

                size属性定义密码框的宽度，单位是单个字符宽度；

                maxlength属性定义最多输入的字符数。

隐藏域: 隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式：<input type="hidden" name="..." value="...">

属性解释：

                type="hidden"定义隐藏域；

                name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

                value属性定义隐藏域的值

单选框: 当需要访问者在单选项中选择唯一的答案时，就需要用到单选框了。

代码格式：<input type="radio" name="..." value="...">

 属性解释：

                type="radio"定义单选框；

                name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；

                value属性定义单选框的值，在同一组中，它们的域值必须是不同的。

复选框: 复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

代码格式：<input type="checkbox" name="..." value="...">

属性解释：

                type="checkbox"定义复选框；

                name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

                value属性定义复选框的值

提交按钮: 提交按钮用来将输入的信息提交到服务器。

代码格式：<input type="submit" name="..." value="...">

属性解释：

                type="submit"定义提交按钮；

                name属性定义提交按钮的名称；

                value属性定义按钮的显示文字；

复位按钮: 复位按钮用来重置表单。

代码格式：<input type="reset" name="..." value="...">

属性解释：

                type="reset"定义复位按钮；

                name属性定义复位按钮的名称；

                value属性定义按钮的显示文字；

常用type属性：button、checkbox、hidden、image、password、checkbox、radio、reset、submit、text。

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

html5新增type属性：

（1）search：input会呈现为搜索框（与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容）。

（2）tel：编辑电话号码的控件，提交时换行符会自动从输入框中去掉（普通的text并不会，故text类型验证输入值时一般需要trim()函数处理）。

（3）url：编辑url的控件，提交时换行符与首位的空格都将自动去除。

（4）email：可输入一个邮件地址。

语义化的优点有:

• 代码结构清晰，易于阅读，利于开发和维护
• 提高用于体验，在样式加载失败时，页面结构清晰
• 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
• 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

语义化标签主要有：

• title：主要用于页面的头部的信息介绍
• header：定义文档的页眉
• nav：主要用于页面导航
• main：规定文档的主要内容。对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
• article：独立的自包含内容
• h1~h6：定义标题
• ul: 用来定义无序列表
• ol: 用来定义有序列表
• address：定义文档或文章的作者/拥有者的联系信息。
• canvas：用于绘制图像
• dialog：定义一个对话框、确认框或窗口
• aside：定义其所处内容之外的内容。<aside> 的内容可用作文章的侧栏。
• section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
• figure：规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
• details：描述文档或者文档某一部分细节
• mark：义带有记号的文本。