表单的目的
表单是为了收集用户信息而存在的,是网页中常见的与用户进行交互的一种方式
表单的组成
一个完整的表单由表单域、表单控件与提示信息组成
表单组成.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表单元素.PNGtextarea
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属性是最合适的(当然这种情况实际上并不多见)
网友评论