HTML表单标签
一、属性有
action
提交的路径地址,也就是后端的接口地址
method:
get 表示地址栏提交数据，有比较私密的信息尽量不要使用
传递的数据量是有限的
post 以隐藏的方式提交
enctype 属性是 HTML 表单中的一个重要属性
定义了当表单数据被提交到服务器时，应该如何对数据进行编码
enctype="multipart/form-data" 表示表单的数据将会被编码成 multipart/form-data 格式。用这个提交时 method 提交方式需为 post
这种格式通常用于表单中包含文件上传的情况，因为它可以包含非文本字段。
换句话说，当用户可能要上传文件或其他非文本数据时，就需要使用这个编码类型。
enctype="application/x-www-form-urlencoded" 如果表单中没有文件上传 这会把所有的表单数据转换成 URL 编码的形式。
二、表单域
1. 单行文本框 , 默认没有type类型也是单行文本框
<input type="text" name="" size="" maxlength="" placeholder='' value="" /> type 决定了表单的类型
value 填入的值，输入的内容就是value
placeholder 占位符，决定了再鼠标未点击之前的文本
size 可见内容的个数，也表示了表框的长度
maxlength 最大输入的长度
name 必须要有 , 非常重要 , 没有 name 则数据不能传递
2. 密码框
type = password
<input type="password" name="" size="" maxlength="" value="" /> value 填入的密码值，输入的内容就是 value
placeholder 占位符，决定了再鼠标未点击之前的文本，但无法作为value传输
size 可见内容的个数，也表示了表框的长度
maxlength 最大输入的长度
name 必须要有 , 非常重要 , 没有 name 则数据不能传递
3. 单选框
type = radio
<input type="radio" name="" value="" checked="checked" /> name 值一致为一组
特性：互斥；但若要互斥，name是必填项
传递数据其实传递的就是input的value值
可以使用label标签,将文本和表单控件绑定在一起
label
当使用该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
<label for="nan">男</label><input type="radio" name="sex" value="男" id="nan">
<label for="nv">女</label><input type="radio" name="sex" value="女" id="nv">
<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
</form> 此处的应用场景是：点击“男/女”就可以选中单选框
4. 多选框
<input type="checkbox" />
注意：多选框中必须要有value和name
并且 name 值必须一致,在名称的后面统一添加[]
再 name 后面添加"[]"中括号的作用是：再后端接收数据时，可以显示为数组形式
<input type="checkbox" name="hobby[]" value="乒乓球">
<input type="checkbox" name="hobby[]" value="篮球">
<input type="checkbox" name="hobby[]" value="羽毛球">
<input type="checkbox" name="hobby[]" value="网球"> 5. 下拉菜单
select 下拉菜单
option 下拉菜单中的选项
optgroup 分组，无法选中
不用 input
<select name="education">
<option value="">请选择</option>
<optgroup label="北方">
<option value="北京">北京</option>
<option value="哈尔滨">哈尔滨</option>
<option value="天津">天津</option>
</optgroup>
<optgroup label="南方">
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</optgroup>
</select> 6. 文件上传
<input type="file" />
只要有文件上传,那么提交方式必须为 post
必须把 enctype="multipart/form-data"
7. 隐藏域
<input type="hidden" />
用户看不到,但是数据可以被提交到后端
8. 多行文本框
不用 input
<textarea name="self" id="" cols="30" rows="3"></textarea>
9. 按钮
普通 type="button" 配合js完成⼀些操作
重置 type="reset" 重置表单数据 有默认的按钮标题。
提交 type="submit" 提交表单
10. readonly和disable属性
readonly
readonly 属性规定输入字段为只读，但其 value 值仍会被表单提交
readonly 属性只针对 text、password 和 textarea 有效
disabled
disabled 属性规定禁用该表单元素，其 value 值不会被表单提交
disabled 属性对所有表单元素均有效，包括 select, radio, checkbox, button 等
使用 disabled 属性后表单元素背景会变成灰色
readonly
readonly 属性规定输入字段为只读，但其 value 值仍会被表单提交
readonly 属性只针对 text、password 和 textarea 有效
disabled
disabled 属性规定禁用该表单元素，其 value 值不会被表单提交
disabled 属性对所有表单元素均有效，包括 select, radio, checkbox, button 等
使用 disabled 属性后表单元素背景会变成灰色
11. fieldset
fieldset 标签 可将 表单内的相关元素分组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>用户名和密码</legend>
<label for="uname">用户名</label>:
<input type="text" value="张三" size="18"/>
密码: <input type="password" placeholder="密码" name="pwd"/><br/>
</fieldset>
<fieldset>
<legend>兴趣爱好</legend>
性别:
<label for="nan">男</label><input type="radio" name="sex" value="男" id="nan">
<label for="nv">女</label><input type="radio" name="sex" value="女" id="nv"><br/>
选修课:
篮球<input type="checkbox" checked name="love[]" value="篮球" disabled>
足球<input type="checkbox" name="love[]" value="足球">
羽毛球<input type="checkbox" name="love[]" value="羽毛球">
</fieldset>
</body>
</html>
浙公网安备 33010602011771号