文章目录
- form表单标签``：
- - 1.作用：收集客户信息
- 注意：在写radio，checkbox（单选，多选）的时候，**一定要写name和value**；name属性是分组，value属性设置值，提交的参数形式：name值=value值。select标签（下拉栏）的name在select中，value在其子标签option中
- - 2.form的属性：
- 主要是action和method
- post和get的区别
- - 3.form三大子标签：
- **3.1 input：**
- input的属性：
- input-type属性的取值（input的主要属性）
- **3.2 select：下拉选**
- 注意：select必须有name属性，不然表单数据拿不到；option必须有value属性，不然拿到的属性是on
- **3.3 textArea：文本域**
- 表单提交问题:
- 标签的共有属性：
- form表单的默认值设置：
- 例子1(整合)：
- 例子2（readonly和disable）：
- 注意：**对于text标签，readonly只能读不能输入，disabled也只能读不能输入，且传参的时候不能传disabled。
form表单标签<form></form>：
- 1.作用：收集客户信息
注意：在写radio，checkbox（单选，多选）的时候，一定要写name和value；name属性是分组，value属性设置值，提交的参数形式：name值=value值。select标签（下拉栏）的name在select中，value在其子标签option中
- 2.form的属性：
主要是action和method
属性 | 值 | 说明 |
accept | MIME_type | HTML 5 中不支持。 |
accept-charset | charset_list | 规定服务器可处理的表单数据字符集。 |
action | URL | 规定当提交表单时向何处发送表单数据。 |
autocomplete | on、off | 规定是否启用表单的自动完成功能。 |
enctype | 见说明 | 规定在发送表单数据之前如何对其进行编码。 |
method | get、post | 规定用于发送 form-data 的 HTTP 方法。 |
name | form_name | 规定表单的名称。 |
novalidate | novalidate | 如果使用该属性，则提交表单时不进行验证。 |
target | _blank、_self、_parent、_top、framename | 规定在何处打开action URL。 |
method：get，post
post和get的区别
get: 提交参数在地址栏上，不安全，提交数据量有限
post：提交参数在请求体中，相对安全，提交数据量无上限
注意：文件上传必须用post
- 3.form三大子标签：
其中三大子标签有：input，select，textArea
3.1 input：
input的属性：
属性名 | 属性说明 |
type | 定义表单输入项input的组件类型详见下一个表格*type属性值说明 |
name | 组件名。给组件起一个名字 作用：提交时 name属性对应的值是参数名，用户输入的数据是参数值 form.html?username=lucy&password=666 |
value | 组件默认值。如果是单选框或者复选框：需要手动给其设置值 |
checked | 设置单选框/复选框的默认选中状态 |
readonly | 设置该标签的参数值只读，用户无法手动更改，参数正常提交。 |
disabled | 设置该标签不可用（禁用），参数值无法更改，参数不能提交 |
size | 组件的长度 |
input-type属性的取值（input的主要属性）
type属性：
取值 | 说明 |
text | 文本框 |
password | 密码输入框（加密） |
radio | 单选框（name分组，value设置值） |
checkbox | 多选框（name分组，value设置值） |
file | 文件输入框 |
color | 取色器 |
number | 数字，只能输入数字 |
email | 只能输入email格式 |
date | 日期输入框 |
button | 按钮 |
submit | 提交按钮 |
image | 图片按钮 |
reset | 重置按钮 |
hidden | 隐藏域 |
3.2 select：下拉选
select属性：name(名)，multiple(可以多选)multiple='multiple' select子标签：<option value="">数据</option> option属性：value（值）,selected（selected=‘selected’）表示被选中，跟radio的checked用法一样
<select name="selectSth">
<option value ="drinking">喝酒</option>
<option value ="smoking">抽烟</option>
<option value ="sleeping" selected="selected">睡觉</option>
</select>注意：select必须有name属性，不然表单数据拿不到；option必须有value属性，不然拿到的属性是on
3.3 textArea：文本域
拥有固定长度和宽度的文本输入框 并且宽度和长度可以更改
cols：宽度
rows：高度
注意：都为数字
css属性：resize:none;可以禁止更改尺寸
<textarea cols="10" rows="5"></textarea>表单提交问题:
提交表单时，input必须有name属性，不然提交不到服务器
1.需要把所有填写好的数据都需要传递到后台服务器
2.传递给后台服务器的时候需要拼写具体的信息 而不是on（在单选或多选的时候，没有设置value属性，会显示on；如：sex=on）
标签的共有属性：
name属性：
1.可以将多个单选和复选设置为一组
2.可以把数据传递到后台服务器
传递到后台服务器的数据格式：url地址?key=value&key1=value1…
value属性:
1.可以为按钮定义一个名称，若按钮已经存在默认的名称 那么在进行value设置的时候会覆盖默认名称
2.设置为某个标签的值。传递参数是 name=value
form表单的默认值设置：
1、针对于text和password 设置value属性即可
2、针对于radio和checkbox 设置被选中：checked=‘checked’ 或者简写为checked
3、针对于下拉选 设置被选中：selected=‘selected’ 或者简写为selected 需要写在option标签上
4、针对于文本域 直接在标签体中设置值即可
例子1(整合)：
<form action="" method="">
text：<input type="text" name="name" /><br />
password：<input type="password" name="pwd" /><br />
radio：<input type="radio" name="sex" value="man" checked="checked"/>radio1
<input type="radio" name="sex" value="women" />radio2
<br/>
checkbox：<input type="checkbox" name="hobby" value="sing"/>checkbox1
<input type="checkbox" name="hobby" value="dance"/>checkbox2
<input type="checkbox" name="hobby" value="rap" checked="checked" />checkbox3
<br />
date:<input type="date" name="date"/><br/>
number:<input type="number" name="number"/><br/>
email:<input type="email" name="email" /><br/>
color:<input type="color" name="color" /><br/>
file：<input type="file" name="file" /><br/>
<input type="submit" value="submit" />
<input type="reset" value="reset"/>
<input type="button" value="button" />
<input type="image" value="img" />
<br/><br/>
select：<select name="like" multiple="multiple">
<option value ="drinking">option1</option>
<option value ="smoking">option2</option>
<option value ="sleeping">option3</option>
</select><br/>
<textarea name="自我介绍" rows="10" cols="20">textarea</textarea>
</form>效果图：
点击提交或image的时候，会提示格式。number和email会有校验
例子2（readonly和disable）：
<form action="" method="get">
text1(readonly):<input type="text" name="text1" readonly="readonly" value="只能看不能输入" /><br/>
text2(disabled):<input type="text" name="text2" disabled="disabled" /><br/>
radio:<input type="radio" name="radio" value="radio1value" />radio1
<input type="radio" name="radio" value="radio2value" readonly="readonly"/>radio2(readonly)
<input type="radio" name="radio" value="radio3value" disabled="disabled"/>radio3(disabled)<br/>
<input type="submit" value="submit"/>
</form>
注意：**对于text标签，readonly只能读不能输入，disabled也只能读不能输入，且传参的时候不能传disabled。
对于radio，readonly也能选，但是disabled修饰的radio不能用，同样不能传参。**
