form

1表单格式

<form action="" method="">            </form>

 

说明

form 提交数据到服务器的时候
 action 目标页面
method 提交方式 

method 取值有两个值 get post

1.1属性

name 名字  type样式

value 值

checked        预先选定复选框或单选按钮

radio   默认选中

rows="相当于文本域的高"

cols="相当于文本域的宽"

 readonly="readonly"表示只读，

 placeholder=" "输入内容

2文本框

 

用户名：<input name="userName" type="text" />

如果input标签中的type属性没有写，默认就是text

文本框中的值就是value，用户输入Name属性：提交到服务器的数据根据name属性获取

3密码框

密码：<input name="password" type="password" />

密码框中的值就是value，用户输入，密码不会明文显示，会用实心圆遮盖 Name属性：提交到服务器的数据根据name属性获取

 

 

 

 

4单选按钮

性别：<input name="sex" type="radio" value="1" checked="checked"/>男    <input name="sex" type="radio" value="0"/>女  <input name="sex" type="radio" value="2"/>保密<br/>

Name相同的radio表示一组，改组中只有一个按钮可以被选中

Value:中的值是被提交的服务器的值

checked="checked" 表示当前的radio默认选中

 

 

 

 

 

 

5复选框

爱好：<input name="hobby" type="checkbox" value="nba"/>NBA <input name="hobby" type="checkbox" value="movie"/>电影 <input name="hobby" type="checkbox" value="game"/>游戏<br/>

Name相同的checkbox表示一组，可以多选

Value:中的值是被提交的服务器的值，可以提交多个

 

 

 

 

 

6日期--h5新特性

生日-年月日：<input name="birthday" type="date" /><br/>

Type取值：date --只有年月日 Datetime-local：有日期有时间

 

 

 

7下拉框

生日月份：<select name="month">                                   <option value="0">请选择月份</option>                                   <option value="1">1</option>                                   <option value="2">2</option>                                   <option value="3">3</option></select><br/>

下拉框选中的值由value决定；name属性写在select 标签中

 

 

 

 

 

 

8文件

头像：<input name="headImg" type="file" /><br />

 

 

9文本域

协议：<textarea rows="10" cols="30"  readonly="readonly">                       网站协议                       1、符合国家...........                       1、符合国家...........                       1、符合国家...........</textarea>

rows="相当于文本域的高" cols="相当于文本域的宽"

readonly="readonly"表示只读，

 

 

 

 

 

 

 

10提交按钮

页面跳转到action属性指定的页面

1.普通提交按钮

<input type="submit" value="注册" />

Value=”按钮上的文字”

 

 

 

2.图片提交按钮

<input type="image" src="img/regbtn.png" />

src=”图片的路径”； 按钮不需要文字，直接用图片替代。

 

3重置按钮

将表单的所有表单元素初始化为原始值

<input type="reset"  value="重置"/>

 

<input type="reset"   value="" 

 style="background-image: url(img/ben.PNG);" />

url 是插入重置的图片

 

 

 

4普通按钮

没有提交和重置的功能，只是由按钮的样子。

<input type="button"  value="普通按钮"/>