简单介绍H5当中的表单标签。<form></form>表示定义一个表单的开始和结束。在form标签中，有主要的三个属性，action表示声明表单中的数据的处理的url地址。method属性表示定义浏览器将表单中的数据提交给服务器端的方式，有get和post两种方式，默认是get。name属性用于设置表单的名称，一般如果存在多个表单的话为了避免混乱而进行设置的。
在form标签中，常用的子标签就是<input > input具备对表单中的数据进行处理分析和存储等属性。它可以通过设置type来执行表单中不同的操作，常见的type属性有text image submit
以下就是我们需要使用表单来制作出来的效果
由图可分析出此页面由六行三列的表格形成，是表单的形式。所以我们先把整体的轮廓给写出来。这里我只写了六行，至于列的话还没有进行设置。然后我们创建完之后，就可以逐行分析当中的内容，根据图片要求去编写代码
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" name="login" method="post">
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</form>
</body>
</html>
以下就是最终成果的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" name="login" method="post">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="orange" colspan="3" width="190">
<font color="white"><b>新用户注册</b></font>
</td>
</tr>
<tr>
<td height="40">
<input type="text" name="username" placeholder="用户名" >
</td>
<td>
<font color="red">*</font>
</td>
</tr>
<tr>
<td height="40">
<input type="password" name="password" placeholder="密码">
</td>
<td>
<font color="red">*</font>
</td>
</tr>
<tr>
<td height="40" >
<input type="password" name="repassword" placeholder="确认密码">
</td>
<td>
<font color="red">*</font>
</td>
</tr>
<tr>
<td>
<input type="text" name="yzm" placeholder="验证码">
</td>
<td>
<input type="image" src="img/getimage.jpg" height="40">
</td>
<td>
<font>点击<a href="">换一张</a></font>
</td>
</tr>
<tr>
<td align="center">
<input type="image" src="img/btn_img.png">
</td>
<td>
<font><a href="">《网站服务协议》</a></font>
</td>
</tr>
</table>
</form>
</body>
</html>
最终的效果展示如下
重点的标签属性。placeholder属性，该属性用在input中，表示添加一个表单提示，但该提示不影响用户的输入。
还有在进行密码表单的编写时，type类型为password。以及form标签中的action属性 method属性都不要忘记写，否则表单最终无法找到执行数据的url路径 以及数据的处理方式
更多推荐
使用H5中的表单标签制作一个简单的网页登陆页面
发布评论