目录
首先：第一步：老规矩，上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
第二步：我们添加一个表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
-->
<form action="" method="get">
</form>
</body>
</html>
第三步：我们通过表格，和input添加一些元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
-->
<form action="" method="get">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" value="qwe" name="name"><br/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" value="asd" name="password"><br/></td>
</tr>
</table>
</form>
</body>
</html>
第四步：添加单选和复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
-->
<form action="" method="get">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" value="qwe" name="name"><br/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" value="asd" name="password"><br/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="男" checked/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td><input type="checkbox" checked="checked" name="lq"/>篮球
<input type="checkbox" name="zq"/>足球
<input type="checkbox" name="ymq"/>羽毛球</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>选择国籍</option>
<option selected="selected" name="China">中国</option>
<option name="USA">美国</option>
<option name="jp">小日本</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
第五步：添加文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
-->
<form action="" method="get">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" value="user" name="name"><br/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" value="abc" name="password"><br/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="男" checked/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td><input type="checkbox" checked="checked" name="lq"/>篮球
<input type="checkbox" name="zq"/>足球
<input type="checkbox" name="ymq"/>羽毛球</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>选择国籍</option>
<option selected="selected" name="China">中国</option>
<option name="USA">美国</option>
<option name="jp">早日噶的小日本</option>
</select>
</td>
</tr>
<tr>
<td>介绍：</td>
<td><textarea cols="30" rows="20" name="introduce">默认值</textarea><br/></td>
</tr>
</table>
</form>
</body>
</html>
第六步：添加提交按钮和重置按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
-->
<form action="" method="get">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" value="user" name="name"><br/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" value="abc" name="password"><br/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="男" checked/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td><input type="checkbox" checked="checked" name="lq"/>篮球
<input type="checkbox" name="zq"/>足球
<input type="checkbox" name="ymq"/>羽毛球</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>选择国籍</option>
<option selected="selected" name="China">中国</option>
<option name="USA">美国</option>
<option name="jp">早日噶的小日本</option>
</select>
</td>
</tr>
<tr>
<td>介绍：</td>
<td><textarea cols="30" rows="20" name="introduce">默认值</textarea><br/></td>
</tr>
<tr>
<td>
<input type="reset"/>
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>
</body>
</html>
最后效果图
版权声明：本文为tea_tea_原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。