HTML表单详细介绍

1、<form action="" method="get">
action="url"将表单信息传递给服务器。
method提交方式有get/post两种,其中get提交后内容会显示在地址上,前提表单内要有name。

而post则隐藏,不会显示
2、<label for="pf">标签就是增加体验效果,例如点击账号两个文字就会自动跳到输入框处,也可用通过id追踪。
3、text单行文本框,value为默认文本值
4、password密码类型,隐藏密码。maxlength=6固定密码只能输入6位
5、radio表示单选按钮,控件名称用name,name值相同结果就是多选一,name不同结果可以多个。
6、Checkbox复选框,name值建议一样,因为是一组的,但是可以多选
7、checked="checked"默认选择,可用于单选按钮和复选框。
8、<select ><option selected="selected">深圳</option> </select>
下拉列表也一样selected="selected"也跟checked一样的默认选择
9、<input type="image" src="btn.png"> //images图片提交类型按钮
10、<input type="file" /></td>//挑选文件上传
11、文本域<textarea rows="10" cols="30" ></textarea>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="600" border="0" cellpadding="0" cellspacing="10" align="center">
<caption><h4>何以解忧?多半只有暴富了</h4></caption>

<form action="" method="get">
<tr>
<td>账号</td>
<td>
<label for="pf">
<input type="text" value="" name="sum"/>
</label>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" value="" maxlength="6" name="pwd"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="登录" id="pf"/><!--普通按钮-->
<input type="button" value="注册"/>
<input type="reset" value="重置" />
<input type="submit" value="提交"/>
</td>
</tr>
</form>
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex" checked="checked">
女<input type="radio" name="sex">
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
温柔<input type="checkbox" name="s">
善良<input type="checkbox" name="s">
性感<input type="checkbox" name="s">
可爱<input type="checkbox" name="s">
御姐<input type="checkbox" name="s">
刁蛮<input type="checkbox" name="s">
</td>
<tr>
<td>图片按钮</td>
<td>
<input type="image" src="btn.png">
</td>
</tr>
<tr>
<td>文件域</td>
<td><input type="file" /></td><!-- 挑选文件上传-->
</tr>
<tr>
<td>文本域</td>
<td>
<textarea rows="10" cols="30" ></textarea>
</td>
</tr>
<tr>
<td>下拉菜单</td>
<td>
<select >
<option>选择数字</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<select >
<option>选择数字</option>
<option>北京</option>
<option>上海</option>
<option selected="selected">深圳</option>
<option>云南</option>
<option>海南</option>
<option>东京</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" value="广州"/></td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" value="本科"/></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" value="123456"/></td>
</tr>
<tr>
<td>昵称</td>
<td><input type="text" value="小哥哥"/></td>
</tr>
<tr>
<td>月薪</td>
<td><input type="text" value="10000"/></td>
</tr>
</table>
</body>
</html>

效果图

posted @ 2019-03-31 22:20  showTimehzy  阅读(346)  评论(0编辑  收藏  举报