HTML5——8form表格
form表头有两种属性,medthod 和action属性。medthod是发送方式,有post 和get两种,post发送时候在地址栏不显示信息,get发送时显示信息,如用户名 密码等 action 填写请求网站的地址。
form表格下,大的方向分类有3种。
1.input类
type name value 等基本属性
input 的tpye 类型 有 text password radio checkbox range(滑块) tel email file 等
password 文本框为黑色圆点看不到具体内容
textarea 里有行列col row 设置大小 不是width 和height
2.select类
select是下拉框
select 下边主要有option标签 做下拉菜单
3.button类
button的type sumbit reset button
4.一些高级属性应用
只读 readonly
默认信息placeholder
与value的区别是 当写入其他信息时,value内容不会被替换 placeholder 内容会被替换掉
必填 required
禁用 diasable 禁止修改
pattern 设置字段格式,正则表达式
表单练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
<style type="text/css">
body div{
border:1px solid red;
width:500px;
height:600px;
margin:100px auto;
text-align:left;
background-color:#ccc;
vertical-align:middle;
}
#p1 input{
width:60px;
}
#p1 select{
width:60px;
}
div h3{
text-align:center;
}
</style>
</head>
<body>
<div>
<h3>个人信息注册</h3>
<form>
<p>姓名:<input type="text" name="name" placeholder="请输入姓名" required/></p>
<p>密码:<input type="password" name="words" placeholder="请输入6-8位密码" required pattern=".{6,8}"/></p>
<p>性别:
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</p>
<p id="p1">出生日期:
<input type="text" name="year"value="2017"/>年
<select name="month">
<option value="1" selected>一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
<option value="7">七月</option>
<option value="8">八月</option>
<option value="9">九月</option>
<option value="10">十月</option>
<option value="11">十一月</option>
<option value="12">十二月</option>
</select>月
<input type="text" name="day"value="1"/>日
</p>
<p>爱好:
<input type="checkbox" name="h" />下象棋
<input type="checkbox" name="h" />听音乐
<input type="checkbox" name="h" />玩游戏
</p>
<p>自我介绍:<br/>
<textarea rows="10" cols="50"></textarea>
</p>
<p>证件上传:<br/>
<input type="file" name="file" value="上传"/>
</p>
<p>
<button type="submit">确认</button>
<button type="reset">重置</button>
</p>
</form>
</div>
</body>
</html>