一、什么是表单标签

表单是用来采集用户的输入数据，然后将数据提交给服务器

---

二、表单的组成

一个表单有三个基本组成部分：

①表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。

②表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

③表单按钮：包括提交按钮、复位按钮和一般按钮；

---

三、表单标签

表单标签＜form＞＜/form＞

功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器语法：

<form action="url" method="get" ></form>

  action=“”  服务器地址

  method=“”  get  /  post          

1.Action 属性

    action=“”  数据提交的路径     服务器地址

action 属性定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

如果省略 action 属性，则 action 会被设置为当前页面。

---

2.method 

 method=“”    方式  方法  数据提交的方式

method 属性规定在提交表单时所用的方法（GET 或 POST）：

<form action="" method="get">
		
	</form>

<form action="" method="post">
		
	</form>

①什么时候使用 GET？

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

1.当您使用 GET 时，表单数据在页面地址栏中是可见的，安全性较低

http://127.0.0.1:8848/lianxi/03%E8%A1%A8%E5%8D%95.html?usernamme=fds&pwd=123&tj=%E6%8F%90%E4%BA%A4%E6%8C%89%E9%92%AE

2.GET 最适合少量数据的提交。浏览器会设定容量限制。

3.get方式可能获取的数据是浏览器里的缓存信息

②什么时候使用 POST？

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

3.Target 属性

target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一：

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

默认值为 _self，这意味着响应将在当前窗口中打开。

四、表单域对象

表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据

<input> 元素

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

1.   文本框 

<form action="" method="get">
		用户名/密码<p><input type="text" name="usernamme"  value="" placeholder="用户名/邮箱"/></p>
		
</form>

定义常规文本输入，定义常规文本输入

---

2.多行文本框

<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

元素定义多行输入字段（文本域）

 行内块元素
rows  行数
cols   列数
style="resize：none"  不修改文本域大小

---

3.复选框

<form>
<input type="checkbox" name="" id="" value="" />pingguo
<input type="checkbox" name="" id="" value="" />juzi
</form>

复选框允许用户在有限数量的选项中选择零个或多个选项 

<label></label>

  行内元素
    将复选框用label包起来，可以实现点文字就选择选框的效果

<label>
                <input type="checkbox" name="pguo" id="pguo" />苹果
                </label>

label包住文本，通过label的属性for与复选框的id值进行联系，实现效果

 <input type="checkbox" name="orange" id="orange" />
            <label for="orange">橙子</label>

---

checked

复选框默认被选中，添加 checked="checked" 或者  直接写checked

---

    4. 密码框

<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>

password 字段中的字符会被做掩码处理（显示为星号或实心圆）。 

---

5.    单选框

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

 必须写上相同的name值才能每次选中一个

 单选框也可以用默认属性checked

---

 6. 文件上传框

访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。

＜input type="file" name="..." size="15" maxlength="100"＞

 

在input里加入multiple属性可以多选文件，默认只能选一个 

---

 7.<select>下拉选择框

	<select name="fruit">
			<option value="apple">apple</option>
			<option value="pear">pear</option>
			<option value="watermelon">watermelon</option>
			<option value="banana">banana</option>
		</select>

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

下拉选择框默认被选中  在<option>里添加selected="selected"  或者是selected

<option>里的value值可以不写，写value的话value要有值，否则提交为空

加mutiple可以多选（用得少）

---

8.number  数字

<form action="/demo/demo_form.asp">
  数量（1 到 5 之间）：
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

9.color 颜色

<input type="color"> 用于应该包含颜色的输入字段。

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

10.range

<input type="range"> 用于应该包含一定范围内的值的输入字段，输入字段能够显示为滑块控件。

<form>
  <input type="range" name="points" min="0" max="10">
</form

可以使用如下属性来规定限制：min、max、step、value。

---

11.month

<input type="month"> 允许用户选择月份和年份。

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

---

12.week

<input type="week"> 允许用户选择周和年。

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

---

13.time

<input type="time"> 允许用户选择时间（无时区）。

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

---

14.datetime

<input type="datetime"> 允许用户选择日期和时间（有时区）

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

15.datetime-local

<input type="datetime-local"> 允许用户选择日期和时间（无时区）。

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

16.：email

<input type="email"> 用于应该包含电子邮件地址的输入字段。

能够在被提交时自动对电子邮件地址进行验证。

<form>
  E-mail:
  <input type="email" name="email">
</form>

---

17.search

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

---

18.tel

<input type="tel"> 用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

---

19.：url

<input type="url"> 用于应该包含 URL 地址的输入字段。

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

---

五、input的属性

1.value 属性

value 属性规定输入字段的初始值：

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

2.readonly 属性

readonly 属性规定输入字段为只读（不能修改）：

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

readonly 属性不需要值。它等同于 readonly="readonly"。 

---

3.disabled 属性

disabled 属性规定输入字段是禁用的,被禁用的元素是不可用和不可点击的,被禁用的元素不会被提交。

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

disabled 属性不需要值。它等同于 disabled="disabled"。

---

4.size 属性

size 属性规定输入字段的尺寸（以字符计）：

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

5.maxlength 属性

maxlength 属性规定输入字段允许的最大长度：

<form action="">
 First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

设置 maxlength 属性，则输入不会超过所允许数的字符。

---

6.autofocus 属性

autofocus 属性是布尔属性。规定当页面加载时 <input> 元素应该自动获得焦点。

使 "First name" 输入字段在页面加载时自动获得焦点：

​
First name:<input type="text" name="fname" autofocus>

​

---

7.height 和 width 属性

height 和 width 属性规定 <input> 元素的高度和宽度。

height 和 width 属性仅用于 <input type="image">。

把图像定义为提交按钮，并设置 height 和 width 属性：

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

---

8.placeholder 属性

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

<input type="text" name="fname" placeholder="First name">

---

9.required 属性

required 属性是布尔属性。

如果设置，则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

<input type="text" name="usrname" required>

六、表单按钮

  1.  提交按钮

＜input type="submit" name="..." value="..."＞

---

2. 重置按钮

 ＜input type="reset" name="..." value="..."＞

---

  3.一般按钮

＜input type="button" name="..." value="..."  οnclick="..."＞
            没有功能，需要通过脚本添加效果

  4. 图片按钮
        <input type="image" src="/>

以下是上述按钮的代码示例和图片

<input type="submit" name="tj" value="提交按钮" />
			<input type="reset" value="重置" />
			<input type="button" name="" id="" value="" />
			<input type="image" src="img/hmbb02.jpg" alt="hmbb" style="width: 50px;" />>

---

案例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.tw {
				display: flex;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<span>收货地址</span>
		<table border="1" cellspacing="0" cellpadding="5" rules="all" style="font-size: 8px;">
			<tr bgcolor="purple">
				<td colspan="6"></td>
			</tr>
			<tr style="background-color: plum;" align="center">
				<td>收货人</td>
				<td>所在地区</td>
				<td>详细地址</td>
				<td>邮政编码</td>
				<td>电话/手机</td>
				<td>相关操作</td>
			</tr>
			<tr style="height: 60px;">
				<td>小张</td>
				<td>河南省&nbsp;郑州市</td>
				<td>二七区兴华南街169号宏鑫花园</td>
				<td>450000</td>
				<td>18736088510 <br>0371-60808016</td>
				<td><a href="" style="text-decoration: none;">编辑</a>&ensp;▏默认地址</td>
			</tr>
		</table>
		<div class="tw">
			<img src="img/20220226164017.png">
			<span style="color: darkgray; font-size: 8px;">新增电话（办公电话，家庭电话和移动电话至少填一个，其他均为必填，最多可添加5个地址</span>
		</div>
		<form method="post" style="font-size: 8px;">
			&emsp;收货人：<input type="text" name="uname" placeholder="小郭"  style="font-size: 8px;width: 55px;"/><br><br>
			&emsp;&emsp;地区：<select name="dq" style="font-size: 8px;width: 88px;">
				<option value="河南省">河南省</option>
				<option value="河北省">河北省</option>
				<option value="江苏省">江苏省</option>
				<option value="山东省">山东省</option>
			</select>
			<select name="sq" style="font-size: 8px;width: 88px;">
				<option value="郑州市">郑州市</option>
				<option value="石家庄市">石家庄市</option>
				<option value="无锡市">无锡市</option>
				<option value="菏泽市">菏泽市</option><br>
			</select><br><br>
			详细地址：<input type="text" name="uname" placeholder="二七区兴华南街169号宏鑫花园"  style="width: 250px;font-size: 8px;"/><br><br>
			邮政编码：<input type="text" name="uname" placeholder="450000" style="font-size: 8px;width: 55px;"/><br><br>
			移动电话：<input type="text" name="uname" placeholder="18736088510" style="font-size: 8px;width: 110px;"/><br><br>
			办公电话：<input type="text" name="uname" placeholder="0371-60808016" style="font-size: 8px;width: 110px;"/><br><br>
			家庭电话：<input type="text" name="uname" placeholder="0371-60808016" style="font-size: 8px;width: 110px;"/><br><br>
			送货时间：
			<select name="sh" style="font-size: 8px;">
				<option value="">送货时间不限</option>
				<option value="">不送了</option>
				<option value="">太多了</option>
				<option value="">不干了</option><br>
			</select><br><br><br>
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<input type="submit"  value="保存修改" style="font-size: 8px; height: 30px; background-color:plum; border: plum;" />
		</form>
		
	</body>
</html>

案例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.bottom {
				height: 50px;
				background-color: #d5e2f6;
				text-align: center;
				margin: auto;
			}

			a {
				text-decoration: none;
			}

			span {
				display: inline-block;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<table border="=1" cellspacing="0" cellpadding="" width="350px" rules="none">
			<tr height="100px">
				<td align="center">&emsp;<img src="img/bd.jpg" width="100px"></td>
				<td></td>
				<td align="center">用户名密码登录</td>
				<td>&emsp;</td>

				<td valign="top" style="font-size: 30px; color: darkgray;">×</td>
			</tr>
			<tr>
				<td colspan="5">

				</td>
			</tr>
			<tr align="center">
				<td colspan="5">
					<form action="" method="get">
						<input type="text" name="uname" placeholder="手机/邮箱/用户名" style="width: 255px; height: 30px;" />
					</form><br>
				</td>
			</tr>
			<tr align="center">
				<td colspan="5"><input type="password" name="pwd" placeholder="密码"
						style="width: 255px;height: 30px;" /><br><br>
				</td>
			</tr>
			<tr>
				<td colspan="5">
					<p></p>
				</td>
			</tr>
			<tr align="center">
				<td colspan="5">
					<form action="" method="post">
						<input type="submit" name="dl" value="登录"
							style="background-color: #4e8fe7; width: 260px;color: aliceblue; height: 30px; border: #4e8fe7;" />
					</form>
				</td>

			</tr>
			<tr>
				<td colspan="5"><a
						href="https://passport.baidu.com/?getpassindex&tt=1645842397705&gid=3C7ACFC-E790-4AA4-A4AF-96AD4D42A409&tpl=pp&u=https%3A%2F%2Fpassport.baidu.com%2F"><small>&emsp;&emsp;&emsp;&nbsp;忘记密码？</small></a>
				</td>
			</tr>
			<tr>
				<td colspan="5">
					<p><br></p>
				</td>
			</tr>
			<tr class="bottom">
				<td colspan="5" align="center">

					<span style="text-align: right; color: royalblue; "><a
							href="https://passport.baidu.com/v2/?login"><small>&emsp;&emsp;扫码登录</small></a></span>
					<span style=" font-size: 8px; color: #4e8fe7;">&emsp;&emsp;&emsp;▏</span>
					<span><a
							href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=100312028&response_type=code&redirect_uri=https%3A%2F%2Fpassport.baidu.com%2Fphoenix%2Faccount%2Fafterauth%3Fmkey%3Dbe264f9f99772293f61c441d1cbe22158e4c4312a3b76554b7%26tpl%3Dpp&state=1645842760&display=page&scope=get_user_info%2Cadd_share%2Cget_other_info%2Cget_fanslist%2Cget_idollist%2Cadd_idol%2Cget_simple_userinfo&traceid="><img
								src="img/qq.jpg" width="20px" align="middle"></a></span>
					<a
						href="https://api.weibo.com/oauth2/authorize?client_id=2512457640&response_type=code&redirect_uri=https%3A%2F%2Fpassport.baidu.com%2Fphoenix%2Faccount%2Fafterauth%3Fmkey%3D5dc201ff8318eb7dd45c27c03b38a3c8ad841dc696d9a361a5%26tpl%3Dpp&forcelogin=1&state=1645842790&display=page&traceid=###"><img
							src="img/wx1.jpg" width="20px" align="middle"></a>
					<a
						href="https://open.weixin.qq.com/connect/qrconnect?appid=wx85f17c29f3e648bf&response_type=code&scope=snsapi_login&redirect_uri=https%3A%2F%2Fpassport.baidu.com%2Fphoenix%2Faccount%2Fafterauth%3Fmkey%3D192282ab60e2631776eadee442cd94e2fc7e751fd4987b5d56%26tpl%3Dpp%26appid%3Dwx85f17c29f3e648bf%26traceid%3D&state=1645842814&display=page&traceid="><img
							src="img/wx2.jpg" width="20px" align="middle"></a>
					<span style="text-align: right; color: royalblue;">
						<a classhref="https://passport.baidu.com/v2/?reg&tt=1645842756404&overseas=&gid=6D85B91-6A46-4CD0-8C3C-E9396CDDF47F&tpl=pp&u=https%3A%2F%2Fpassport.baidu.com%2F">
							<small>&emsp;&emsp;&emsp;&emsp;立即注册</small></a></span>

				</td>
			</tr>
		</table>

	</body>
</html>

案例三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<h2>小明的报名表</h2>
		<span>用户名：</span>
		<form action="" method="get">
			<input type="text" name="uname" value="小明" />
		</form><br>
		<span>密码：</span>
		<form action="" method="post">

			<input type="password" value="" />
		</form><br>
		<span>确认密码:</span>
		<form action="" method="post">

			<input type="password" value="" />
		</form><br>
		<span>爱好:</span><br>
		<form action="" method="get">


			<input type="checkbox" name="num1"  value="唱歌" />唱歌
			<input type="checkbox" name="" id="" value="" />跳舞
			<input type="checkbox" name="" id="" value="" />游泳
			<input type="checkbox" name="" id="" value="" />看书
			<input type="checkbox" name="" id="" value="" />玩手机
		</form>
		<span>性别</span><br>
		<form action="" method="post">
			<input type="radio" name="aa" id="" value="" />男
			<input type="radio" name="aa" id="" value="" />女
			<input type="radio" name="aa" id="" value="" />保密
		</form>
		<br>
		<span>上传照片</span><br>
		<form action="" method="post">
			<input type="file" name="..." size="15" maxlength="100">
		</form><br>
		<span>学历</span>
		<form action="" method="post">
			<select name="">
				<option value="博士">博士</option>
				<option value="硕士">硕士</option>
				<option value="">研究生</option>
				<option value="">本科</option>
				<option value="">专科</option>
				<option value="">高中</option>
			</select>
		</form><br>
		<span>个人签名</span><br>
		<form action="" method="post">
			<textarea rows="10" cols="30"></textarea>
		</form><br>
		<form action="" method="get">
			<input type="submit" name="tijiao" value="马上报名" style="width: 190px;" />
			<input type="reset" value="重置" />
			<input type="button" name="" id="" value="同意" />
		</form>


	</body>
</html>

 案例四

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="10"  rules="all">
			<tr align="center">
				<td>
					<form action="" method="get">

						<input type="checkbox" name="" id="" value="" />
					</form>
				</td>
				<th>商品</th>
				<th>颜色/尺码</th>
				<th>数量</th>
				<th>售价</th>
				<th>优惠</th>
				<th>成交价小计</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<tr align="center">
				<td>
					<form action="" method="get">

						<input type="checkbox" name="" id="" value="" />
					</form>
				</td>
				<td><img src="img/kz.png" width="40px"></td>
				<td>丹宁族<br>160/66A</td>
				<td>
					<form action="" method="">
						<input type="button" name="" id="" value="-" />
						<input type="button" name="" id="" value="1" style="width:50PX;" />
						<input type="button" name="" id="" value="+" />
					</form>
				</td>
				<th>¥119.00</th>
				<th>¥0.00促销优惠</th>
				<td>¥119.00</td>
				<td>有货</td>
				<td>加入收藏夹▏删除<br><span style="text-decoration: underline;">修改优惠</span></td>
			</tr>
			<tr>
				<td colspan="9" align="right">
					<form action="" method="get" style="text-align: left;">

						<input type="checkbox" name="" id="" value="" />全选&nbsp;删除选中商品
					</form><small>已选商品<b>1</b>件<br>
					商品总价：<b>¥119.0</b>优惠<b>¥0.00</b><br>
					合计（不含运费）：<b style="color: red;">¥119.00</b><br><br></small>
继续购物&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<form action="" method="">
	<input type="submit" id="" name="" value="去结算" style="background-color: red; border: red; color: white; width: 100px; height: 35px;"/>
</form>
				</td>

			</tr>
		</table>

	</body>
</html>