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;
500px;
height:600px;
margin:100px auto;
text-align:left;
background-color:#ccc;
vertical-align:middle;
}
#p1 input{
60px;
}
#p1 select{
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>

原文地址:https://www.cnblogs.com/haoyp/p/7093069.html