1、表单标签概述
表单，是用于采集用户输入数据的，用于和服务器进行交互。比如登录系统，使用的标签是form，可以定义一个范围，范围代表采集用户数据的范围，表单中的数据要想被提交，必须指定name属性。属性：
- action：指定提交数据的URL
序号 | get | post |
|---|---|---|
1 | 请求参数会在地址栏中显示，封装在请求行中 | 请求参数不会在地址栏中显示，会封装在请求体中 |
2 | 请求参数长度有限制 | 请求参数长度无限制 |
3 | 不太安全，参数是暴露在url中 | 较为安全 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!-- form:用于定义表单，可以定义一个范围，代表了采集用户数据的范围
-->
<form action="#" method="get">
用户名: <input name="uesrname"> <br>
密码：<input name="psd"> <br>
<input type="submit" value="登录">
</form>
</body>
</html>
2、表单项标签
以下三类表单项标签较为重要：
- input标签：可以通过type属性，改变元素展示样式 type属性： text--文本输入框，默认值，placeholder指定输入框的提示信息； password：密码输入框； radio：单选框，注意，要想让多个单选框实现单选效果，name属性值必须一致；一般会给每一个单选框提供 value属性，说明其被选中提交的值； checkbox：复选框，注意事项同radio，此外，其有check属性，可以指定默认值； file：文件选择框； hidden：隐藏域，用于提交信息； 按钮： submit，提交按钮，可以提交表单；button，普通按钮；image，可以添加图片，提交表单； 取色器：
- lable标签：指定输入项的文字描述信息，注意：label的for属性一般会和input 的id属性值对应，对应后，点击label区域，会让input输入框获取焦点。
- select：下拉列表 子元素：option，指定列表项
- textarea：文本域 cols：每一行有多少个字符； rows：默认多少行。
【举例】：使用input、select、textares标签设计输入登录信息
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签_表单项</title>
</head>
<body>
<!-- form:用于定义表单，可以定义一个范围，代表了采集用户数据的范围
-->
<form action="#" method="get">
<label for="uesrname"> 用户名:</label> <input type="text" name="uesrname" placeholder="请输入用户名"> <br>
密码：<input type="password" name="psd"> <br>
性别：<input type="radio" name="gender" value="男"> 男
<input type="radio" name="gender" value="女"> 女 <br>
爱好：<input type="checkbox" name="hobby" value="eat" checked="checked"> 吃饭
<input type="checkbox" name="hobby" value="sleep"> 睡觉
<input type="checkbox" name="hobby" value="drink"> 喝水 <br>
图片：<input type="file"> <br>
隐藏域：<input type="hidden" name="id" value="aaa"><br>
取色器：<input type="color" name="color"><br>
生日：<input type="date" name="birthday"><br>
生日：<input type="datetime-local" name="birthday1"><br>
邮箱：<input type="email" name="email"><br>
年龄：<input type="number" name="age"> <br>
省份：<select name="provice">
<option value=""> 请选则 </option>
<option value="1"> 北京 </option>
<option value="2" selected> 上海 </option>
</select><br>
自我描述：<textarea cols="20" rows="5" name="description"> </textarea>
<input type="submit" value="登录">
<input type="button" value="一般按钮"><br>
<input type="image" src="./img/2.png" ><br>
</form>
</body>
</html>
3、注册页面案例实现
实现如下的注册页面，主要是form中嵌套table来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<!-- form:用于定义表单，可以定义一个范围，代表了采集用户数据的范围
-->
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username"> 用户名</label></td>
<td><input type="text" name="uesrname" id="username"></td>
</tr>
<tr>
<td><label for="psd"> 密码</label></td>
<td><input type="password" name="psd" id="psd"></td>
</tr>
<tr>
<td><label for="email"> email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name"> 姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel"> 手机号</label></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td><label for="gender"> 性别</label></td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td><label for="date"> 出生日期</label></td>
<td><input type="date" name="date" id="date"></td>
</tr>
<tr>
<td><label for="code"> 验证码</label></td>
<td><input type="text" name="code" id="code">
<img src="../image/2.png">
</td>
</tr>
<tr>
<td colspan="2" align="center"> <input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>【实现效果】：
本文为博主原创文章，转载请注明出处。
