HTML学习笔记（五）表单标签
认识表单结构
现实中的表单
现实中的表单，类似我们去银行办理信用卡填写的单子。 如下图：
以上表单目的是为了收集用户信息
在网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
HTML中表单结构
在HTML中，一个功能完整的表单结构通常由包含框、输入框、提交按钮三个部分构成。
简单的表单结构：
<form id="form1" name="form1" method="post" action="" > <p>姓名：<input type="text" name="username" id="username"></p> <p>密码：<input type="password" name="paw" id="paw"></p> <input type="submit" name="sub" id="sub" value="提交"> </form>
- form元素：用来创建一个表单。
- input元素：创建表单域对象，可以利用type属性设置其为文本域（text）、密码域（password）、提交按钮（submit）。
浏览器显示：
表单元素
1 <form>...</form>：定义表单 2 <input />：定义输入域 3 <textarea />：定义文本域 4 <select>...</select>：定义下拉菜单或列表框 5 <option>...</option>：定义下来选项或列表选项 6 <button>...</button：定义表单的发送按钮 7 <optgroup>...</potgroup>：定义下拉选项组 8 <label>...</label>：绑定提示，点击标签文本，自动定位到表单域输入焦点 9 <fiedset>...</fiedset>：定义表单的字段域（表单分组） 10 <legend>...</legend>：定义字段域（表单分组）的标题
所有表单元素都包含两个基本属性：
- name：定义表单对象名称
- id：定义表单对象ID
一般可以为表单对象的name和id属性设置相同的属性值
form元素
form元素是表单的包含框，任何其他表单域都必须包含其中。另外，form元素也可以说是表单数据的前端处理器，因为它负责数据的收集、打包和发送。掌握form元素的关键是要理解它所包含的几个核心属性
form元素属性：
- enctype
- enctype是Encase Type（包装类型）的简称，该属性将设置表单中用户输入的数据发送到服务器时，浏览器使用的编码类型。
- enctype属性包含3个值：
- application/x-www-form-urlencoded：将表单中的数据编码为名/值对的形式通过URL发送给服务器。
示例：
<h1>enctype属性讲解</h1> <form action=“action.asp” enctype="application/x-www-form-urlencoded" name="login" id="login"> <p>用户名：<input type="text" name="username" id="username" value="张三" /></p> <p>密码：<input type="password" name="paw" id="paw" value="12345"></p> </form>
在上面表单中，当提交数据后，form会自动把数据打包为“uer="张三"，paw="12345"”格式，然后通过查询字符串的形式发送到服务器，服务器接收到数据之后，就能够根据uer和paw变量句柄来获取用户提交的数据。
- multipart/form-data：将表单中的数据编码为一条消息，每个表单域对应消息中的一部分，然后通过HTTP方式发送到服务器。
示例：
<h1>enctype属性讲解</h1> <form action=“action.asp” enctype="multipart/form-data" name="login" id="login"> <p>用户名：<input type="text" name="username" id="username" value="张三" /></p> <p>密码：<input type="password" name="paw" id="paw" value="12345"></p> </form>
在上面表单中，form会自动把所有表单域独立打包为数据包，形式如下：
login={ user={”张三“} paw={”12345“} }
上面以JSON数据格式模拟，其中大括号表示数据包的外包装，等号设置标签名（左侧变量名）和数据表（右侧数据）之间的对应关系。服务器接受到数据之后，会自动根据这些标签来接受和查看对应数据包中的数据。
使用这种方式提交数据一般常用来传递二进制信息，如：使用表单进行文件上传、提交图像等。 - text/plain：将表单中的数据以纯文本的形式进行编码，其中不包含任何控件（即表单域的名称）或格式字符。这种方法一般很少使用，也不建议使用。
- application/x-www-form-urlencoded：将表单中的数据编码为名/值对的形式通过URL发送给服务器。
- action
action属性用于指定接收并处理表单数据的服务器程序的url地址。
- method
method属性表示处理表数据的方法。主要包括两种方法：get和post
get和post方法的主要区别如下：
- get方法是从服务器上获取数据，而post是向服务器上传递数据。
- get方法将表单中的数据以“名/值”对形式添加到action所设置URL后面，并使用“？”符号连接URL，而各变量之间使用“&”连接。
示例：（示例中，就是使用get方法传递的数据）
http:/www.mysite.cn/web_park/index.asp?menu=3&sub_menu=77 - post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式传递到action所指向的url。
- get方法所传递的数据以附加字符串的形式通过浏览器地址栏公共传递，因此所发送的数据是不安全的，这样就会有一些隐私的信息被第三方看到。post方法所传递的数据对用户来说都是不可见的，相对来说要安全许多。
- 由于受URL长度的限制，get方法传输的数据量小，而post可以传输大量的数据，因此一般在上传文件时只能使用post方法。
- 在get方法中，由于数据在URL中传输，因此数据的值必须魏ASCII字符，而post方法没有字符集的限制。
input元素
input元素可以定义多种形式的输入框，用来接收用户输入的数据，输入框的形式主要通过type属性来决定。
语法：<input type="value" />
- type="text"，定义单行文本框。这时input元素可以包含如下特殊属性。
- value：定义文本框包含的默认字符串
- size：定义文本框的字符数，即设置文本框的宽度，该属性可以通过CSS来控制，所以不需要设置。
- maxlength：定义文本框能够接受的最大字符数。
- type="password"，定义密码域。文本框的特殊形式，包含的值以圆点或星号形式代替，所包含的属性与单行文本框相同。
- type="hidden"，定义隐藏域。其传递的值不会显示出来。实际应用中，很多数据不需要用户输入，但是需要作为参数传递给服务器，于是使用隐藏域可以避免这些数据对表单交互行为的干扰。隐藏域只包含一个value属性，利用该属性可以传递各种固定参数到服务器。
- type="checkbox"，定义复选框。复选框主要包含value属性和checked属性。
- value属性设置复选框的传递值
- checked属性设置复选框在默认状态下是否为选中状态。
- type="radio"，定义单选按钮。多个单选按钮可以组合为一个单选按钮组，单选按钮组中的所有input元素的name属性值都必须相等，这样就可以把多个单选按钮捆绑在一起。
- type="file"，定义文件域。文件域能够方便用户把本地各种类型的文件以二进制数据流的形式传递给服务器。
注意：当表单中包涵文件域时，form元素的method属性必须设置为"post"，enctype属性必须设置为"multipart/form-data"，否则提交操作将会失败。 - type="submit"，定义提交按钮。改按钮负责提交表单数据到服务器。
- type="reset"，定义重设按钮。该按钮能够清空用户输入的数据，并回复到默认状态。
- type="image"，定义图像按钮。可以通过指定一个图标来定制按钮的样式。图像按钮包含按钮和图像两种元素的属性。例如，使用src属性定义图像按钮的URL，使用alt属性来定义乳香替换文本等。该按钮没有动作，需要用户通过脚本的形式为其定义操作的动作。
- type="button"，定义普通按钮。该按钮没有动作，需要用户通过脚本的形式为其定义操作的动作。
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单演示</title> </head> <body> <h1>input元素的type属性</h1> <form action="" method="post" name="form1" id="form1"> <p>单行文本：<input type="text" name="text1" id="text1" value="单行文本" maxlength="9"></p> <p>密码域：<input type="password" name="paw1" id="psw1" maxlength="9"></p> <p>隐藏域：<input type="hidden" name="hidden1" id="hidden1" value="123456"></p> <p> 复选框1：<input type="checkbox" name="check1" id="check1" value="复选框1"> 复选框2：<input type="checkbox" name="check2" id="check1" value="复选框2"> 复选框3：<input type="checkbox" name="check3" id="check1" value="复选框3"> </p> <p> 单选1：<input type="radio" name="radioGroup1" id="radio1" value="单选1"> 单选2：<input type="radio" name="radioGroup1" id="radio2" value="单选2"> 单选3：<input type="radio" name="radioGroup1" id="radio3" value="单选3"> </p> <p>文件域：<input type="file" name="file1" id="file1"></p> <p>提交按钮：<input type="submit" name="submit1" id="submit1" value="提交"></p> <p>重置按钮：<input type="reset" name="reset1" id="reset1" value="重置"></p> <p>图像按钮：<input type="image" name="image1" id="image1" src="" alt="图片" title="图片" width="50px" height="50px"></p> <p>普通按钮：<input type="button" name="but1" id="but1" value="普通按钮"></p> </form> </body> </html>
浏览器显示：
textarea元素
textarea元素用来设置文本区域，也就是多行文本框。当需要用户输入大量数据时，使用textarea元素是最佳选择。
textarea包含的属性：
- cols和rows：分别设置文本区域的字符宽度和行数。由于这两个属性不属于语义性属性，仅用来设置样式，因此不建议使用。
- wrap：该属性定义用户输入内容大于文本域宽度时的显示方式，选值包括两个：
- soft：当在表单中提交时，textarea中的文本不换行。默认值
- hard：当在表格中提交时，textarea中的文本换行（包含换行符）。当使用hard时，必须规定cols属性。
代码示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单演示</title> 6 </head> 7 <body> 8 <h1>textarea元素</h1> 9 <form action="" method="post" name="form1" id="form1"> 10 <p><textarea cols="20" rows="10" wrap="soft">请在这里输入信息</textarea></p> 11 <p><input type="submit" value="提交"></p> 12 </form> 13 </body> 14 </html>
浏览器显示：
select元素
select元素用来定义下拉菜单或列表框。select元素必须于option元素配合使用，使用option元素定义每个选项的信息，包括显示的值和要传递的值。
代码示例：
1 <h1>select元素</h1> 2 <form action="" method="post" name="form1" id="form1"> 3 <p> 4 <p> 5 <select> 6 <option value="1">选项1</option> 7 <option value="2">选项2</option> 8 <option value="3">选项3</option> 9 </select> 10 </p> 11 <input type="submit" value="提交"> 12 </p> 13 </form>
浏览器显示：
当为select元素定义了size属性之后，select元素就会由下拉菜单的形式转换为列表框形式。size的值如果大于或等于select元素包含的option元素时，则列表不会出现滚动条，否则就会出现滚动条。
为select元素定义了size属性之后，就可以为select元素定义multiple属性，设置列表框是否允许多选，取值固定为multiple。
代码示例：
1 <form action="" method="post" name="form1" id="form1"> 2 <p> 3 <p> 4 <select name="select1" id="select1" size="2" multiple="multiple"> 5 <option value="1">选项1</option> 6 <option value="2">选项2</option> 7 <option value="3">选项3</option> 8 </select> 9 </p> 10 <input type="submit" value="提交"> 11 </p> 12 </form>
浏览器显示：
select选项分区（optgroup元素）
optgroup元素的作用是在下拉菜单或列表框中定义分组选项。（可以使用optgroup元素为select元素所包含的option元素进行分类）
可以为optgroup元素使用label属性，将分组定义标签。
代码示例：
1 <form action="" method="post" name="form1" id="form1"> 2 <p> 3 <select name="select1" id="select1" > 4 <optgroup label="数字"> 5 <option value="1">1</option> 6 <option value="2">2</option> 7 <option value="3">3</option> 8 </optgroup> 9 <optgroup label="字母"> 10 <option value="a">a</option> 11 <option value="b">b</option> 12 <option value="c">c</option> 13 </optgroup> 14 </select> 15 <input type="submit" value="提交"> 16 </p> 17 </form>
浏览器显示：
绑定提示标签（label元素）
label元素可以为表单域定义提示信息。
技巧：使用label元素的for属性可以使其与表单域绑定在一起，形成关联，当用户单机标签文本时，系统会自动把输入焦点定位到对应的表单域中。
代码示例：
1 <h1>绑定提示标签到表单域</h1> 2 <form action="action.asp" name="form1" id="form1"> 3 <p> 4 <label for="username">用户名：</label> 5 <input type="text" name="username" id="username"> 6 </p> 7 <p> 8 <label for="paw">密码：</label> 9 <input type="password" name="paw" id="paw"> 10 </p> 11 <p><input type="submit" value="提交"></p> 12 </form>
浏览器显示：
还可以使用label元素嵌套整个表单域对象，这样提示的标签文本会自动于相邻的表单域关联在一起。
代码演示：
1 <form action="action.asp" name="form1" id="form1"> 2 <p> 3 <label for="username">用户名： 4 <input type="text" name="username" id="username"> 5 <span>注册用户名长度限制为3~12个字符</span> 6 </label> 7 </p> 8 <p> 9 <label for="paw">密码：</label> 10 <input type="password" name="paw" id="paw"> 11 </p> 12 <p><input type="submit" value="提交"></p> 13 </form>
浏览器显示：
表单分组（fieldset元素和legend元素）
fieldset元素：定义一个表单域组，相当于一个容器，把表单收容在一起，该元素本身不参与数据的交互操作
legend元素：定义表单组的标题
代码示例：
1 <h1>用户注册表单分组</h1> 2 <form action="action.asp" name="form1" id="form1"> 3 <fieldset> 4 <legend>基本信息（必填）</legend> 5 <ul> 6 <li> 7 <label for="username">用户名： 8 <input type="text" name="username" id="username" maxlength="12" size="30"> 9 <span>注册用户名长度限制为3~12字节</span> 10 </label> 11 </li> 12 <li> 13 <label for="paw">论坛密码： 14 <input type="password" name="paw" id="paw" maxlength="12" size="30"> 15 </label> 16 </li> 17 </ul> 18 </fieldset> 19 <fieldset> 20 <legend>参考资料（选填）</legend> 21 <ul> 22 <li> 23 <label for="homepage">个人网址： 24 <input type="text" name="homepage" id="homepage" maxlength="80" size="44"> 25 </label> 26 </li> 27 <li> 28 <label for="QQnum">QQ号码： 29 <input type="text" name="QQnum" id="QQnum" maxlength="20" size="44"> 30 <span>填写您的QQ号码，方便与他人联系</span> 31 </label> 32 33 </li> 34 </ul> 35 </fieldset> 36 <p><input type="submit" value="提交"></p> 37 </form>
浏览器显示：
fieldset元素默认显示边框效果，而legend默认位于左上角，所有这些样式都可以通过CSS来改变。另外，legend元素必须包含在fidldset元素内部，且紧邻fiedlset元素。
定义快捷键（accesskey属性）、访问键（tabindex属性）和禁止访问（disabled属性）
HEML为表单中的每一种元素都提供了3个属性：accesskey、tabindex、disabled。
accesskey属性：定义快捷键
tabindex属性：定义访问键
disabled属性：定义禁止访问。如果对于不希望用户输入的表单域，可以定义disabled属性。
代码示例：
1 <h1>定义快捷键、访问键和禁止访问</h1> 2 <form action="action.asp" name="form1" id="form1"> 3 <p> 4 <label for="username">用户名： 5 <input type="text" name="username" id="username" maxlength="12" size="30" accesskey="b" tabindex="1"> 6 <span>注册用户名长度限制为3~12字节</span> 7 </label> 8 </p> 9 <p> 10 <label for="paw">论坛密码： 11 <input type="password" name="paw" id="paw" maxlength="12" size="30" accesskey="c" tabindex="2" disabled="disabled"> 12 </label> 13 </p> 14 </form>
浏览器显示：
- 使用Alt+accesskey属性值（IE下）或Shift+Alt+accesskey属性值（Firefox下）可以快速访问页面中对应的表单域。
- 使用Tab键也可以快速访问对应的表单域，不过将根据tabindex属性值来决定输入的顺序。
- disabled属性只有一个值“disabled”，当定义该属性后，就表示禁止了该文本框的使用，所定义的快捷访问键和Tab访问键都将失效。
button元素
HTML定义按钮的方式有多种，从功能上可以随意使用，但是从语义角度来分析，按钮只有使用button元素才更符合语义结构。
button元素默认表现的效果与将input元素的属性type设置为submit的效果是一致的，但是从语义角度分析，不建议使用input元素。因为input元素是输入的意思，用作按钮时，对于机器来说是一种不友好的表现。在button元素内可以放置内容，如文本和图片等。
button相对于input元素来说为按钮提供了更多的功能、更丰富的内容。button将按钮文字单独列出来，并且可以在button内添加图片，赋予文字和图片更多选择的样式，使生硬的按钮变得更生动。
代码示例：
<h1>button元素</h1> <form action="action.asp" name="form1" id="form1" method="post"> <p> <label for="username">用户名：</label> <input type="text" name="username" id="username"> </p> <p> <label for="paw">用户名：</label> <input type="password" name="paw" id="paw"> </p> <p> <button> <img src="login.gif" alt="登录" /> </button> </p> </form>
浏览器显示：
本文来自博客园，作者：车泽泽，转载请注明原文链接：https://www.cnblogs.com/chezeze/p/13983138.html
浙公网安备 33010602011771号