3.8 HTML表单标签
HTML 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。表单是网页中提供的一种交互式手段操作，生活中我们很容易接触到表单，比如网上注册一个账号（淘宝账号，qq 账号等）或者我们去银行开户让我们填的表。from标签的属性action：此属性规定当提交表单时，数据将发送到哪个URL。它指定了表单数据在提交时的接收地址。默认情况下，如果不设置该属性，数据会提交到当前页面的URL。method：此属性定义数据发送的方式，常见的是"get"和"post"。“get"方式将表单数据附加到URL之后进行传输，适用于少量数据的提交；而"post"方式则是通过HTTP消息体发送数据，适用于提交大量或包含敏感信息的数据。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。enctype：当方法为"post"时，此属性规定发送表单数据之前如何对数据进行编码。它有三个可能的值：“application/x-www-form-urlencoded”（默认值，所有字符都会进行编码）、“multipart/form-data”（用于文件上传）和"text/plain”（纯文本格式发送数据，不常用）。target：此属性规定在何处打开提交表单后接收到的响应。它有多个可能的值，如"_blank"（新窗口或选项卡）、“_self”（同一框架，即当前窗口）、“_parent”（父框架）、“_top”（整个窗口）或指定的iframe名称。autocomplete：此属性规定浏览器是否应预填充表单。它可以是"on"或"off"，用于控制浏览器是否应自动完成输入字段的值。
novalidate：这是一个布尔属性，如果指定，则浏览器不会在提交前对表单数据进行验证。name：表单的名称，可用于在JavaScript中引用该表单。
3.8.2 input标签：
<input>标签是表单中最重要的元素之一，它允许用户输入不同类型的数据。<input>标签通过 type 属性定义输入类型。input标签的属性：type：定义输入类型（如 text、password、checkbox、radio、submit、reset、email、file 等）。name：定义输入字段的名称，用于在表单提交时标识数据。value：定义输入字段的初始值（对于某些输入类型如 text、radio、checkbox 等）。placeholder：简短的提示，描述期望在输入字段中输入的值。required：指示该字段在表单提交前必须填写。min、max：用于 number、range 等类型，定义值的范围。step：定义 number、range 等类型中合法的数字间隔。pattern：用于 text、search 和 url 类型，定义输入字段必须匹配的正则表达式。pattern 属性适用于以下类型的 input 标签：text, search, url, telephone, email 以及 password。
<body><formaction="#"method="get">Name:<inputtype="text"name="name"pattern="[A-z]{4}"title="请输入四个字母"/><inputtype="submit"value="提交"/></form></body>autocomplete：规定是否应启用自动完成功能。autofocus：规定在页面加载时，输入字段应自动获得焦点。readonly：规定输入字段是只读的。disabled：规定输入字段是禁用的。multiple：规定输入域中可选择多个值，适用于以下类型的 input 标签：email 和 file。form：规定输入域所属的一个或多个表单。
示例：
<body><formaction="#"method="get"id="user_form">First name:<inputtype="text"name="fname"/><inputtype="submit"value="提交"/></form><p>下面的输入域在 form 元素之外，但仍然是表单的一部分， 也就是说提交按钮会把 first name 和 last name的值都提交。</p>Last name:<inputtype="text"name="lname"form="user_form"/></body>text类型input：输入文本
在网页中最常见的表单元素就是文字字段，用户可以在文字字段内输入字符或者单行文本。
<inputtype="text"name="控件名称"value="文字字段的默认取值"size="控件的长度"maxlength="最长字符数"/><formname="formBox"method="post"action="">姓名：<inputtype="text"name="name"size="20"/><br/>年龄：<inputtype="text"name="age"size="40"value="10"maxlength="3"/></form>password类型input：输入密码
密码输入框是一种特殊的文字字段，他的各个属性和文字字段是相同的，但是输入进密码输入框的字符全部是*表示，保证周围人看不见输入的文本。
<inputtype="password"name="pwd"/>radio类型input：单选
单选按钮可以使用户从选择列表中选择一个选项。几个单选按钮可以连接在一起，只需要把它们的 name 值设置为相同的。同一组中只有一个按钮可以同时被选。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，且不会随表单提交。
<formname="formBox"method="post"action=""><inputtype="radio"name="sex"value="male"checked/>男<br/><inputtype="radio"name="sex"value="female"/>女</form>checkbox类型input：多选
复选框可以让用户从一个选项列表中选择超出一个的选项。复选框可以拥有自己的名字，并不需要属于一个组。
<formname="formBox"method="post"action=""><inputtype="checkbox"name="music"checked/>音乐<br/><inputtype="checkbox"name="art"/>美术<br/><inputtype="checkbox"name="math"/>数学<br/></form>email类型input：填写email
<inputtype="email">file类型input：上传文件
<inputtype="file">按钮类型input
HTML 表单中，有三种按钮：提交按钮，重置按钮，匿名按钮。我们可以使用<button>元素或者<input>元素来创建一个按钮。type 属性的值指定显示什么类型的按钮。
这里只介绍通过input标签中的按钮。
提交按钮：submit
用于发送表单数据给服务器。
<inputtype="submit"value="This is a submit button"/>重置按钮：reset
重置按钮用来清除用户在页面中输入的信息。在文本框中输入内容，点击按钮即可清除。
实际上，重置按钮可以重置form表单中大部分内容，比如：input输入框、单选、复选、文件选择、多行文本、下拉框。
<inputtype="reset"value="This is a reset button"/>匿名按钮：button
没有自动生效的按钮，但是可以使用 JavaScript 代码进行定制。如果你省略了 type 属性，那么这就是默认值。
<inputtype="button"value="This is a anonymous button"/>3.8.3 select标签：下拉菜单
<select>标签用于创建下拉选择列表，<option>标签则用于定义列表中的选项。下拉菜单能够节省页面空间，正常状态下显示一个选项，单击展开所以选项。
<formname="formBox"method="post"action=""><selectname="select"><optionvalue="成都">成都</option><optionvalue="广州">广州</option><optionvalue="四川">四川</option><optionvalue="上海">上海</option></select></form>注意：下拉菜单的宽度是由<option>标记中包含的最长文本的宽度决定的。select>属性：name：定义选择列表的名称。required：指示用户必须选择一个选项。size：定义可见选项的数量（默认为1，表示下拉列表）。multiple：允许用户选择多个选项。disabled：禁用整个选择列表。option>属性：value：定义选项的值。selected：规定选项在页面加载时默认被选中。disabled：禁用该选项。label：定义当使用<optgroup>时与该选项关联的标签。
3.8.4 textarea标签：文本域
当用户想要填入多行文本时，就应该使用文本域而不是文本字段。文本域使用<textarea>标记。
<formname="formBox"method="post"action="">留下您的联系方式：<textareaname="textarea"cols="35"rows="5"></textarea></form>textarea属性name：定义文本区域的名称。rows 和 cols：定义文本区域的可见行数和字符宽度。placeholder：简短的提示，描述期望在文本区域中输入的值。
required、autocomplete、readonly 和 disabled 属性与<input>类似。
3.8.5 button标签：按钮
<button>标签用于创建一个点击按钮。button属性type：定义按钮类型（如 submit、reset、button）。和input标签中一致。name 和 value：当按钮是提交类型时，定义其名称和值。disabled：规定按钮是禁用的。
3.8.6 lable标签
<label>标签为<input>元素定义描述（标签）。lable属性：for：规定<label>绑定到哪个表单元素。lable标签的作用<label>标签在 HTML 表单中确实有其重要的作用，尽管在视觉上可能看起来加不加都没有影响，但实际上它对用户体验和可访问性有重要影响。<label>标签的主要作用是为表单控件（如<input>、<textarea>、<select>等）提供描述或说明。当用户点击这个描述时，关联的表单控件会获得焦点，这对于键盘用户或屏幕阅读器用户来说尤其重要。
具体来说，<label>标签的用途包括：1、提高可访问性：对于使用屏幕阅读器的用户来说，<label>标签提供了关于表单控件的额外信息，使得这些用户可以更好地理解每个控件的用途。2、改善用户体验：当用户点击<label>标签时，关联的表单控件会自动获得焦点，这使得用户可以更轻松地与表单进行交互。3、增加表单的清晰度：通过为表单控件添加描述性标签，可以使表单更加清晰易懂，减少用户的困惑和错误。
为了将<label>标签与表单控件关联起来，可以使用 for 属性和 id 属性。for 属性的值应该与要关联的表单控件的 id 属性的值相同。例如：
<labelfor="username">用户名:</label><inputtype="text"id="username"name="username">在上面的例子中，<label>标签的 for 属性值与<input>标签的 id 属性值相同，因此它们被关联在一起。当用户点击用户名:这个标签时，关联的输入框会自动获得焦点。
如果不使用<label>标签或没有正确地将它们与表单控件关联起来，那么表单的可访问性和用户体验可能会受到影响。因此，在编写 HTML 表单时，建议使用<label>标签并为它们提供有意义的描述。
3.8.7 fieldset和legend标签
<fieldset>标签将表单内的相关元素分组，<legend>标签则为<fieldset>定义标题。fieldset>属性：disabled：禁用<fieldset>中的所有控件。form：规定<fieldset>所属的一个或多个表单。legend属性
无特定属性，通常只包含文本内容作为<fieldset>的标题。使用 fieldset 和 legend 来组织用户信息部分
<fieldset><legend>用户信息</legend><labelfor="username2">用户名:</label><inputtype="text"id="username2"name="username"><br><labelfor="email">电子邮件:</label><inputtype="email"id="email"name="email"><br><labelfor="password">密码:</label><inputtype="password"id="password"name="password"></fieldset>使用 fieldset 和 legend 来组织地址信息部分
<fieldset><legend>地址信息</legend><labelfor="street">街道:</label><inputtype="text"id="street"name="street"><br><labelfor="city">城市:</label><inputtype="text"id="city"name="city"><br><labelfor="country">国家:</label><inputtype="text"id="country"name="country"></fieldset>3.8.8 input标签实现的按钮效果和button标签的区别
1、标签语义：<input type="button">是一个自闭合标签，它主要用于创建一个简单的按钮，通常用于触发一些客户端的脚本操作，比如 JavaScript 函数。<button>是一个成对的标签，可以包含文本、图片或其他 HTML 内容。从语义上讲，<button>标签更加灵活，因为它可以包含更丰富的内容，并且更易于样式化。2、内容展示：<input type="button">只能显示简单的文本，该文本通过 value 属性设置。<button>可以包含复杂的 HTML 结构，包括文本、图像、图标等，提供了更多的自定义选项。3、样式化：
由于<input type="button">是自闭合的，它的样式化能力相对有限，主要通过 CSS 来改变外观。<button>标签则更易于通过 CSS 进行样式化，因为可以针对内部的 HTML 内容进行更细致的样式调整。4、表单提交：
当<input type="button">被点击时，它不会提交表单，除非通过 JavaScript 添加了额外的提交逻辑。<button>默认行为也不会提交表单，但是如果将它的 type 属性设置为 submit（即<button type="submit">），点击该按钮将会提交表单。5、兼容性：<input type="button">在所有现代浏览器中都有很好的支持。<button>也是一个广泛支持的 HTML 元素，但是在一些非常老的浏览器中可能存在兼容性问题。6、JavaScript 事件处理：
对于<input type="button">和<button>，都可以通过 JavaScript 添加事件监听器来处理用户交互，如点击事件。
总的来说，<input type="button">和<button>在功能上相似，但在内容展示、样式化和表单提交行为上有所不同。选择使用哪一个主要取决于你的具体需求和设计考虑。如果你需要一个能够包含丰富内容且易于样式化的按钮，那么<button>可能是更好的选择。如果你只需要一个简单的文本按钮，并且希望代码尽可能简洁，那么<input type="button">可能更适合你。
3.8.9 挑战：表单制作
代码：
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><title></title></head><body><formaction=""method="get"><p>姓名：<inputtype="text"name="username"/></p><p>密码：<inputtype="password"name="password"/></p><p>性别：<inputtype="radio"name="gender"value="0"/>男<inputtype="radio"name="gender"value="1"/>女</p><p>爱好：<inputtype="checkbox"name="like"value="sing"/>唱歌<inputtype="checkbox"name="like"value="run"/>跑步<inputtype="checkbox"name="like"value="swimming"/>游泳</p><p>照片：<inputtype="file"name="person_pic"/></p><p>个人描述：<textareaname="about"></textarea></p><p>籍贯：<selectname="select"><optionvalue="成都">成都</option><optionvalue="广州">广州</option><optionvalue="四川">四川</option><optionvalue="上海">上海</option></select></p><p><inputtype="submit"name=""value="提交"/><inputtype="reset"name=""value="重置"/></p></form></body></html>
