HTML学习笔记八——表单标签

一、表单

form 标签，主要用于收集用户信息，其内部可存放许多表单控件，例如：input 标签等。

（一）form 标签

form 标签为双标签。
属性：
（1）action，定义表单要提交的地址，必须设置；
（2）method，提交表单的方式，其取值有 get 和 post；

Form 表单中 method 的 post 和 get 的区别：

1. get 是从服务器上获取数据，post 是向服务器传送数据。
2. get 是把参数数据队列加到提交表单的 action 属性所指的 url 中，值和表单内各个字段一一对应，在地址栏中可以看到；而 post 是通过 HTTP post 机制，将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 action 属性所指的 url 地址中，用户看不到这个过程。
3. 对于 get 方式，服务器端用 Request.QueryString 获取变量的值；而对于 post 方式，服务器端用 Request.Form 获取提交的数据。
4. get 传送的数据量较小，不能大于2KB，而 post 传送的数据量较大，一般被默认为不受限制，但理论上 IIS4 （Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB。

（二）input 标签

input 标签为单标签。
属性：

1. placeholder，输入框中给予的提示信息，输入内容后提示信息自动消失，兼容到 IE8 以上；
2. name，必须设置，才能保证用户在表单中输入的数据能够发送给服务器，否则后端拿不到数据；
3. value，输入框的值，可自行设默认值，当 input 为按钮形式时，该属性可以用于更改按钮名称；
4. outline，默认点击输入框时，外面会有一圈黑色边框，一般设为 none；
5. disabled，设为禁用，该属性也在 button 中存在，属性值与属性名相同；
6. readonly，只读功能，常用于文本框不可编辑，属性值与属性名相同；
7. type，定义输入框类型
   取值有：
   （1）text，普通的文本输入框（默认）；
   （2）password，密码输入框，输入的内容以星号或点形式出现；
   （3）submit，可点击的提交按钮，默认名称为提交，可通过 value 属性更改按钮名称；
   注：提交按钮点击后提交信息到 form 标签中 action 属性所指定的地址
   （4）reset，可点击的重置按钮，将输入内容清空，其默认名称为重置，可通过 value 属性更改按钮名称；
   （5）button，单纯的按钮，通过 value 属性设置按钮名称，可以搭配 JS 决定点击按钮后的任何行为，开发中最常用；
   注：当 input 为按钮形式时，type 不变，可以用 button 标签代替 input 标签。
   （6）radio，单选框，通过设置 name 的值相同判断其为同一组的；
   若要实现点击文字也可选中选项，则给文本添加 label 标签并设置 for 属性，属性值为对应单选框的 id ；
   若要设置单选框默认值，则给同组的某个单选框中添加 checked 属性，属性值为 checked（可省略属性值）；
   （7）checkbox，复选框，通过设置 name 的值相同判断其为同一组的；
   注：复选框实现点击文字也可选中选项效果，以及设置默认值的方式与单选框方式一致
   （8）file，选择文件上传；
   （9）image，图片按钮，代替 submit 形式的提交按钮，通过设置图片路径 src 属性实现；
   （10）hidden，隐藏文段，隐藏用户状态信息，将信息传给后端，但不被用户所见，与 value 属性搭配，在 value 中放置带给后端的信息；

格式如下：

<form method="属性值" action="属性值">
    账号：<input type="text" placeholder="属性值" name="属性值" />
    密码：<input type="password" placeholder="属性值" name="属性值" />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
</form>

（三）下拉菜单

一个 select 标签中放置多个 option 标签可设置下拉菜单。

select 标签属性：
（1）size，设置菜单未点击前显示几个，默认只显示一个；
（2）multiple，设置可选多个，通过点击 Ctrl / Shift + 鼠标左键 选择多项，属性值与属性名相同；

option 标签属性：
（1）value，提供给后端需要用的 value 值，后端才能知道选中了哪个值；
（2）selected，默认选中，给同组的某一个标签设置，属性值与属性名相同，select 标签 multiple 属性存在时才可给多个 option 标签设置默认选中；

（四）文本域

textarea 标签可用于输入多行文本，该标签的 value 值直接写在双标签内部，无默认值时要注意双标签要紧贴一起，否则可能存在空格问题。

属性有：
（1）cols，设置列数，对应字符，中文字符数与列数并非一致；
（2）rows，设置行数，对应字符，中文字符数与列数并非一致；
文本域控制宽高不用这两个属性，而是用 CSS 设置宽高。
（3）placeholder，输入框中给予的提示信息，输入内容后提示信息自动消失，兼容到 IE8 以上；

该标签默认文本域可被拉动，因此在 CSS 中可通过 resize 属性重新设置大小，属性值有 vertical（垂直拉动）、horizontal（水平拉动）、both（双向拉动，默认值）、none（不可拉动）。

（五）字段集

fieldset 标签，会自动设置方形边框，可通过在其中设置 legend 标签设置缺口，该标签内可放置其他标签；legend 标签中输入文本内容。
fieldset 标签的边框样式以及宽高可以通过 CSS 改变，该标签与 legend 标签均可作为正常标签使用。

代码如下：

<fieldset>
    <legend>性别</legend>
    <input type="radio" name="aa">男
    <input type="radio" name="aa">女
</fieldset>

效果图：

二、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！