文章目录
一.表单概念
HTML表单是网页上用于收集用户输入信息的一种元素。它由一系列输入字段（input）、选择字段（select）、文本区域（textarea）以及提交按钮（submit）等组成。
表单的目的是收集用户的数据并将其发送到服务器进行处理。用户可以在表单中输入文本、选择选项、上传文件等。然后，当用户点击提交按钮时，表单的数据会被发送到定义的处理程序或服务器端脚本进行处理。
语法：
| GET | 向服务器发送数据请求，适合用于获取数据 |
| POST | 向服务器发送数据请求，适合用于发送数据 |
二.表单中的标签
-
框图标签
<input />：
在HTML中，表单是用来收集用户输入的一种元素。表单中的input元素被用来定义输入字段，用户可以在这些字段中输入文本、数字、日期等不同类型的数据。
| type | 定义框图类型，常见的值有text(文本),password(密码),submit(登录) reset(重置) radio(单选) checkbox(多选) button(普通按钮) image(图片) |
| name | 定义当前框图的名字，服务器将用户在框图中输入的信息保存到对应名字的框图中。 |
| value | 保存用户通过该框图输入的信息，该值自动生成。 框图类型为按钮时，可使用value将提示内容显示在按钮上 |
| size | 设置框图长度 |
| length | 设置框图支持输入信息的自大长度 |
| checked | 默认选中该框图 |
<body>
<!--声明表单并添加属性-->
<form method="get" action="welcome.html">
<p><!--input:声明文本框并添加属性-->
请输入账号：<input type="text" name="UserCode" />
</p>
<p><!--密码框-->
请输入密码：<input type="password" name="UserPwd" />
</p>
<p><!--登录/重置按钮-->
<input type="submit" value="登录" />
<input type="reset" value="重置" />
<!--图片按钮-->
<input type="image" src="HTML.Png" width="100px" height="100px" />
</p>
<p><!--单选按钮--><!--一个name对应一个value-->
请选择性别：
<input type="radio" name="UserSex" value="男" checked /> 男
<input type="radio" name="UserSex" value="女" /> 女
</p>
<p><!--多选按钮--><!--一个name对应多个value-->
请输入爱好：
<input type="checkbox" name="UserHobby" value="唱" />唱
<input type="checkbox" name="UserHobby" value="跳" />跳
<input type="checkbox" name="UserHobby" value="rap" />rap
<input type="checkbox" name="UserHobby" value="篮球" />篮球
<input type="checkbox" name="UserHobby" value="看坤" />看坤
</p>
</body>- 效果展示
-
下拉菜单标签
语法： <select>...</select>：
HTML中的下拉菜单可以使用
<select>元素来创建，内部使用<option>元素表示每个选项。下面是一个基本的例子：
| selected | 指定该选项默认被选中。 |
| disabled | 指定该选项不可用，无法选择 |
| label | 为选项提供一个标签，使其更易于理解 |
| hidden | 指定该选项不会显示在下拉菜单中，可以在后台使用。 |
| value： | 用于在提交表单时传递选中的选项值 |
<p><!--下拉菜单-->
请选择地址：
<select name="UserAddSheng">
<option value="陕西">陕西</option>
<option value="山西">山西</option>
<option value="江苏">江苏</option>
<option value="安徽">安徽</option>
</select> 省
<select name="UserAdd市">
<option value="南京">南京</option>
<option value="无锡" selected>无锡</option>
<option value="苏州">苏州</option>
<option value="常州">常州</option>
</select> 市
</p>- 效果演示
多行文本域
在HTML中，可以使用textarea标签来创建多行文本域。
注意：rows和cols属性分别用于指定文本域的行数和列数。根据需要调整这两个属性的值。
<p><!--多行文本域-->
请输入简介：、
<textarea name="UserMassage" rows="10" cols="10"></textarea>
</p>文件域
<!--有文件上传需要添加表单属性，无则不需要添加-->
<input type="file" name="UserPic">- 效果演示
邮箱标签
- 效果演示
<p><!--邮箱标签-->
请输入邮箱：
<input type="email" name="UserEmail" />
</p>
网址标签
三.案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="HTML.png" width="250" height="250">
<form method="get" action="loding.html">
<p>电子邮箱：<input type="email" name="UserEmail"></p>
<p>设置密码：<input type="password" name="UserName"></p>
<p>真实姓名：<input type="text" name="UserName"></p>
<p>性别：
<input type="radio" name="UserSex" value="男" checked /> 男
<input type="radio" name="UserSex" value="女" /> 女
</p>
<p>
生日：
<select name="UserAddNian">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select> 年
<select name="UserAddYue">
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> 月
<select name="UserAddRi">
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select> 日
</p>
<p>为什么要填写我的生日?</p>
<p>请输入原因：<input type="text" name="UserReseation" ></p>
<p>
我现在的身份是:
<select>
<option value="请选择身份">请选择身份</option>
<option value="教师">教师</option>
<option value="学生">学生</option>
<option value="其它">其它</option>
</select> (非常重要)
</p>
<p>
<img src="HTML.png" width="100px" height="50px"/>
<a href="#">看不清换一张</a>
</p>
<p>请输入验证码: <input type="text" name="YanZhengMa"></p>
<p><input type="image" src="zhuce.png" width="100" height="50"></p>
</form>
</body>
</html>- 效果演示
四.表单高级应用
隐藏域属性
在提交表单时，隐藏域的值会作为表单数据一同发送到服务器。服务器可以通过接收表单数据的方式来获取隐藏域的值，并进行相应的处理。
<p><!--隐藏域-->
后方内容是隐藏内容：
<input type="hidden" name="UserSecret" value="1111"/>
</p>只读属性
<p><!--只读权限-->
文本框中无法剪辑内容：
<input type="text" name="UserSecret" value="1111"/ readonly>
</p>禁用 属性
在上面的示例中，如果选择了"禁用"选项，则输入字段将被禁用，否则将启用。
<p><!-- disabled:禁用-->
<input type="reset" value="重置" disabled />
</p>表单元素标注
<label>标签：用于定义输入字段的标签或名称。与相应的表单元素相关联，使得当用户点击标签时，关联的表单元素会聚焦或选中。
<p><!--点击女性自动选择女性选项，无需点击对应框图-->
请选择性别：
<input type="radio" name="UserSex" value="男" checked / id="nan"><label for="nan">男</label>
<input type="radio" name="UserSex" value="女" id="nv" /><label for="nv">女</label>
</p>- 效果演示
五.表单验证方法
-
placeholder
该属性值用于设置框图中的提示语
<p>
请输入账号：<input type="text" name="UserCode" placeholder="输入账号!!!" />
</p>- 效果演示
-
required
该属性值用于设置文本框必须填写内容否则无法登录。
<p>
请输入密码：<input type="password" name="UserPwd" required/>
</p> 
pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
<p><!--正则表达式:--><!--^1:以1开头 [358]:3,5,8任选其一 \d{9}:后面内容在0-9之间-->
请输入手机号：
<input type="text" name="UserPhoneNum" required pattern="^1[358]\d{9}" />
</p>- 效果演示
扫一扫
4523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
