表单
2021-11-02 本文已影响0人
OmewSPG
表单的目的
表单是为了收集用户信息而存在的，是网页中常见的与用户进行交互的一种方式
表单的组成
一个完整的表单由表单域、表单控件与提示信息组成
表单组成.PNG
表单域
定义整个表单范围的元素，在表单域中设定submit按钮之后，可以提交当前表单域中所有的数据到指定url地址。表单域内部可以包含大部分标签元素，它在页面上并不会体现出具体的结构，而是作为一张表单所需收集数据的限定范围
表单域.PNG
表单控件
用来定义各种表单元素，允许用户在表单中输入或选择的内容控件（输入框，选择按钮或者下拉菜单等）
input、select和textarea都是表单控件的三种元素
input表单元素
input表单元素.PNG
其中，type属性值有以下类型，他们具体的作用是改变input表单元素的形态，亦或是文本框的输入方式
input表单元素的type值.PNG
这是实现表单的必要属性，除此之外，input元素还具有以下其它属性
input属性.PNG
label标签
label作为html双标签结构，仅在网页上显示出所包括的提示信息
label常常会和网页上的表单控件元素绑定到一起使用，比如说：
label标签.PNG
select元素
select表单元素.PNG
textarea
textarea表单元素.PNG
一个表单的实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 综合练习 -->
<h4>青春不常在，抓紧谈恋爱</h4>
<form action="xxx.php" method="post" name="regster">
<table width="600px">
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="male">
<label for="male"><img src="images/man.jpg"> 男</label>
<input type="radio" name="sex" id="female">
<label for="female"><img src="images/women.jpg"> 女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option selected="selected">--请选择年份--</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
</select>
<select>
<option selected="selected">--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option selected="selected">--请选择日期--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>...</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" value="北京">
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" id="married">
<label for="married">已婚</label>
<input type="radio" name="marry" id="unmarried" checked="checkeds">
<label for="unmarried">未婚</label>
<input type="radio" name="marry" id="breakoff">
<label for="breakoff">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" value="本科">
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="like" id="yuanqi">
<label for="yuanqi">元气</label>
<input type="checkbox" name="like" id="chengshu">
<label for="chengshu">成熟</label>
<input type="checkbox" name="like" id="aojiao">
<label for="aojiao">傲娇</label>
<input type="checkbox" name="like" id="neixiang">
<label for="neixiang">内向</label>
<input type="checkbox" name="like" id="anjing">
<label for="anjing">安静</label>
<input type="checkbox" name="like" id="all" checked="checked">
<label for="all">我都喜欢</label>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea>自我介绍</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked" id="list">
<label for="list">我同意注册条款和加入会员标准</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h4>我承诺</h4>
<ul>
<li>年满18，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
image.png
这里其实是将所有表单元素放到了表格当中，然后隐藏了表格边框，做出一种类似网页排版的效果（实际开发中并不会这样做，因为表格并不适合用作排版，而更擅长用来展示数据）
在表格标签的外层包括了表单域form标签，点击submit按钮，依旧能够提交数据，这说明form提交数据的方式跟其内部结构并没有太大联系
总结来说就是所有关于表单的内容一定要写在form标签里面，包括submit按钮，实际开发中如果需要用户填写多个表单，用多个form标签来划分区域并区分name属性是最合适的（当然这种情况实际上并不多见）
