HTML入门之表单（form）标签
程序员文章站
2022-06-12 12:49:12
...
Html 表单标签 Form
“form”作为英文单词有“表格”的意思
目录：
一、标签用途
在html中，标签是使用来创建供用户输入的html表单，在网页中很常见，比如：注册和登录页面就是用表单实现的。
二、标签语法格式
表单内容说明：表单内容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等标签
form属性：
action属性 定义表单数据提交地址 例如:http://www.baidu.com
method属性 定义表单提交的方式，一般有“get”方式和“post”方式
（一）input标签的使用
标签 定义通用的表单元素：
type属性：
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件 form表单需要加上属性enctype="multipart/form-data"
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
value属性： 定义表单元素的值,此值是数据提交时键的值
name属性：定义表单元素的名称，此名称是提交数据时的键名
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.
（1）input标签无属性格式
<!DOCTYPE html>
<html>
<body style="background-color: bisque;">
<form>
<input />
</form>
</body>
</html>
（2） input标签，添加type属性，
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
<!DOCTYPE html>
<html>
<body style="background-color: bisque;">
<form>
<input /> 只有input标签
<br/>
<input type = 'text' name = 'username' value = '00'/>
<input type = 'password' name = 'password' value = '123456' /> 有value默认值
<br/>
<input type = 'text' name = 'username'
value = '' placeholder='请输入用户名'/>
<!-- placeholder:提示信息 -->
<!-- 输入时默认信息消失通过js -->
<input type = 'password' value = 'password'
value = '111' placeholder='请输入密码...'/>
<!-- value:默认值 -->
<br/>
<input type = 'submit' value = '提交按钮' >
<!-- type="submit" 定义提交按钮 -->
<input type = 'reset' value = '重置按钮' >
<!-- type="reset" 定义重置按钮 -->
<input type = 'button' value = '普通按钮' >
<!-- type="button" 定义一个普通按钮 -->
</form>
</body>
</html>
（3）input标签，单选框radio的运用
<!DOCTYPE html>
<html>
<body style="background-color: bisque;">
<h2> 单选框 <h2/>
性别： <input type = 'radio' name='' value=''/>男
<input type = 'radio' name='' value=''/>女
<!-- 没有添加name属性值 -->
<br/>
性别： <input type = 'radio' name='sex' value=''/>男
<input type = 'radio' name='sex' value=''/>女
<!-- 添加了name属性值，并且属性值相同时可以选择进行单选 -->
</body>
</html>
第一行的性别选项未设置 name属性，所以无法进行单选
第一行的性别选项设置了 name属性，且‘男’、‘女’的name属性值相同，故可以进行单选
（4）input标签，type=“checkbox” 复选框
<!DOCTYPE html>
<html>
<body style="background-color: bisque;">
<form>
<input type = 'checkbox' name= '' value = '' checked>苹果
<input type = 'checkbox' name= '梨' value = '梨'>梨
<input type = 'checkbox' name= '葡萄' value = '葡萄'>葡萄
<input type = 'checkbox' name= '香蕉' value = '香蕉'>香蕉
<!-- checked设置为默认选项 -->
</form>
</body>
</html>
（二）
label 标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
如性别选择的单选框，只需要鼠标点击到‘男’就可以，不需要点到按钮点
<!DOCTYPE html>
<html>
<body style="background-color: bisque;">
<h2> 单选框 <h2/>
性别： <input type = 'radio' name='' value=''/>男
<input type = 'radio' name='' value=''/>女
<!-- 没有添加name属性值 -->
<br/>
性别： <input type = 'radio' name='sex' value=''/>男
<input type = 'radio' name='sex' value=''/>女
<!-- 添加了name属性值，并且属性值相同时可以选择进行单选 -->
<h3>升级用法<h3/>
性别： <input type = 'radio' name='sex' value='' id = 'man'/>
<label for = 'man'> 男<label/>
<input type = 'radio' name='sex' value='' id = 'woman'/>
<label for = 'woman'>女<label/>
<!-- 添加了name属性值，并且属性值相同时可以选择进行单选 -->
<!-- 它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件 -->
<h3>设置按钮失效<h3/>
<input type = 'submit' value = '注册按钮' disabled>
<!-- disabled 使按钮失效 -->
</body>
</html>
（三）select 标签 定义下拉表单元素
name:表单提交项的键.
size：选项显示个数
multiple：多选项
<option> <option/> 下拉选中的每一项 属性：
value:表单提交项的值.
selected: selected下拉选默认被选中
<optgroup>为每一项加上分组
<!DOCTYPE html>
<html>
<body style="background-color: bisque;">
<form>
<h3>下拉框<h3/>
<select name="address">
<option value="1">山东省</option>
<option value="2" selected="selected">北京市</option>
<option value="3">河北省</option>
<option value="4">河南省</option>
<select/>
<!-- selected="selected",默认显示,不选择,不提交 -->
<br/><br/>
<select name="address" multiple="multiple" size="2">
<option value="1">山东省</option>
<option value="2" >北京市</option>
<option value="3">河北省</option>
<option value="4">河南省</option>
<select/>
<!-- select name="un" multiple="multiple"size="2" -->
<!-- multiple="multiple"可以多选; size显示的数量 -->
</form>
</body>
</html>
（四）textarea 标签 定义多行文本输入框
name: 表单提交项的键.
cols: 文本域默认有多少列
rows: 文本域默认有多少行
<!DOCTYPE html>
<html>
<body>
<h3>textarea标签使用<h3/>
<textarea cols = '30' rows = '20' style = "resize:none;">
</textarea>
</body>
</html>
三、标签属性补充：
（1）accept：服务器接收到的文件的类型（html5版本也不支持）；
（2）accept-charset：服务器可处理的表单数据字符集；
（3）action：当提交表单时向何处发送表单数据；
（4）autocomplete：是否启用表单的自动完成功能，值可以是：on、off，html5新增；
（5）enctype：在向服务器发送表单数据之前如何对其进行编码，
（6）method="post"时可以使用，值可以是：multipart/form-data、text/plain等；
（7）method：用于发送表单数据的HTTP方法，值可以是：get、post；
（8）name：规定表单的名称，在xhtml中也废弃，使用id来代替；
（9）novalidate：提交表单时不进行验证，值为：novalidate，html5新增；
（10）target：在何处打开action属性中的地址，值可以是：_blank、_self、_parent、_top；