你的位置:首页 > 网页设计

[网页设计]html 基础表单


<form>表单

name 表单的名称

action 表单的提交地址

target 打开方式

enctype MIME类型

method 表单数据提交方式,get:在url地址上面传送参数到服务器,post:在后台传送参数到服务器

 

<label>

<label for="username">用户名:</label><input type="text" id="username"/>

label元素不会向用户呈现任何特殊效果,不过它为鼠标用户改进了可用性,如果你在label元素内点击文本,就会触发此控件,就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上

 

表单属性

type 元素类型

name 元素的名称

value 元素的值

size 元素的宽度

maxlength 输入字符的最大长度

disabled 被禁用的input元素既不可用,也不可点击,直到满足某些条件为止

readonly 规定输入字段为只读,不能修改,不过仍然可以使用tab键切换到该字段,还可以选中或拷贝其文本

 

表单的type类型

text 定义单行输入字段,用户可以在其中输入文本,默认是20个字符

用户名:<input type="text" name="username"/>

password 定义密码字段,字段中的字符会被遮蔽

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

radio 定义单选按钮

<input type="radio" name="sex" value="1" checked/>男<input type="radio" name="sex" value="2"/>女

单选按钮的name值必须相同

value值是提交给后台的数据,代表你的选择

checked是默认选择

checkbox 定义复选框

<input type="checkbox" name="love" value="music" checked/>音乐<input type="checkbox" name="love" value="movie"/>电影<input type="checkbox" name="love" value="game"/>游戏

button 定义可点击的按钮(大多与javascript使用来启动脚本)

<input type="button" value="确定"/>

submit 定义提交按钮,提交按钮向服务器发送数据

<input type="submit" value="提交"/>

reset 定义重置按钮,重置按钮会将所有表单字段重置为初始值

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

image 定义图像作为提交按钮

<input type="image" src="url" alt=" "/>

file 定义输入字段和"浏览..."按钮,供文件上传

<input type="file" name="img" multiple/>

用这项功能时,在form标签中要指定method属性为"post",enctype属性指定为"multipart/form-data"

multiple控制是否上传多个文件

color 定义拾色器

date,datetime,datetime-local,month,week,time 定义日期时间字段

email 定义用于e-mail地址的文本字段

当提交表单时,会自动地对email字段的值进行验证

hidden 定义隐藏输入字段

<input type="hidden" name="country" value="china"/>

隐藏字段常常储存默认值,或者由javascript改变它们的值

number 定义带有spinner控件的数字字段

<input type="number" min="1" max="10"/>

max:规定允许的最大值

min:规定允许的最小值

step:规定合法数字间隔

value:规定默认值

range 定义带有slider控件的数字字段

<input type="range" min="0" max="100" value="50" step="10"/>

range类型显示为滑块,可以设置可接受数字的限制

search 定义用于搜索的文本字段

tel 定义用于电话号码的文本字段

url 定义用于URL的文本字段

当提交表单时,会自动地对url字段的值进行验证

 

html5的新的表单属性

novalidate 属性规定当提交表单时不对其进行验证

novalidate属性适用于<form>,以及下面的<input>类型:text,search,url,telephone,email,password,datepickers,range,color

<form action=" " novalidate>  E-mail: <input type="email" />  <input type="submit" /></form>

autocomplete 属性规定表单是否应该启用自动完成功能

autocomplete属性适用于<form>,以及下面的<input>类型:text,search,url,telephone,email,password,datepickers,range,color

<input type="search" name="keywords" autocomplete="on/off" />

自动完成允许浏览器预测对字段的输入,当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项,一定要设置name或者id

autofocus 属性规定当页面加载时按钮应当自动地获得焦点,适用于所有<input>标签的类型

form 属性规定输入域所属的一个或多个表单,适用于所有<input>标签的类型,form属性必须引用所属表单的id

<form action=" " id="zhuang">  First name:<input type="text" name="fname" /> <input type="submit" /></form>  Last name:<input type="text" name="lname" form="zhuang" />

form overrides 表单重写属性,允许您重写form元素的某些属性设定

表单重写属性有:

formaction - 重写表单的action属性

formenctype - 重写表单的enctype属性

formmethod - 重写表单的method属性

formnovalidate - 重写表单的novalidate属性

formtarget - 重写表单的target属性

表单重写属性适用于以下类型的<input>标签:submit,image

<form action=" ">  e-mail: <input type="email" /><br />  <input type="submit" value="确定1" /><br />  <input type="submit" formnovalidate="true" value="确定2" /><br /></form>

height,width 属性规定于input标签的image类型的图像的高度和宽度

list 属性规定输入域的datalist,datalist是输入域的选项列表

list属性适用于以下类型的<input>标签:text,search,url,telephone,email,datepickers,number,range,color

Webpage: <input type="url" list="zhuang" /><datalist id="zhuang">  <option label="W3Schools" value="http://www.w3school.com.cn" />  <option label="Google" value="http://www.google.com" />  <option label="Microsoft" value="http://www.microsoft.com" /></datalist>

min,max,step 属性用于为包含数字或日期的input类型规定约束

max属性规定输入域所允许的最大值

min属性规定输入域所允许的最小值

step属性为输入域规定合法的数字间隔(如果step="3",则合法的数是-3,0,3,6等)

min,max,step属性适用于以下类型的<input>标签:datepickers,number,range

<input type="number" min="0" max="10" step="3" />

multiple 属性规定输入域中可选择多个值

multiple属性适用于以下类型的<input>标签:email,file

<input type="file" multiple />

pattern 属性规定用于验证input域的模式

[ ]限定类型范围:[0-9],[a-z],[A-Z],[0-9a-zA-Z]

{ }限定个数范围:{1,10},{1,}

title:提示文字

pattern属性适用于以下类型的<input>标签:text,search,url,telephone,email,password

<form action=" ">  国家代码:<input type="text" pattern="[A-z]{3}" title="三个字母的国家代码" />  <input type="submit" /></form>

placeholder 属性提供一种提示,描述输入域所期待的值

提示会在输入域为空时显示出现,会在输入域获得焦点时消失

placeholder属性适用于以下类型的<input>标签:text,search,url,telephone,email,password

<input type="search" placeholder="Search W3School" />

required 属性规定必须在提交之前填写输入域(不能为空)

required属性适用于以下类型的<input>标签:text,search,url,telephone,email,password,datepickers,number,checkbox,radio,file

<form action=" ">  Name: <input type="text" required />  <input type="submit" /></form>

 

<textarea>表单元素:多行文本域

可以通过cols和rows属性来规定textarea的尺寸,不过更好的办法是使用css的height和width属性

<textarea name="content" rows="5" cols="50" style="resize:none;"> </textarea>

cols用来规定文本域内每一行可以容纳多少个字

rows用来规定文本域一共可以显示多少行

resize用来规定文本域的大小是否允许修改,及修改的可选项:属性值包括:

1.none:不允许,2.horizontal:允许改变宽度,3.vertical:允许改变高度,4.both:允许改变宽高

 

<select>表单元素:下拉框

value 选项的值

multiple 是否多选

size 下拉列表框的显示行数

selected 设置默认选中的选项

<select name="city" multiple size="3">  <option value="0">请选择</option>  <option value="bj">北京</option>  <option value="gz" selected>广州</option>  <option value="sh">上海</option></select>

<optgroup>表单元素:下拉框分组

用于组合选项,当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易

必须的属性:label

<select name="city" multiple>  <optgroup label="广东">    <option value="1">广州</option>    <option value="2">深圳</option>  </optgroup>  <optgroup label="其他">    <option value="3" selected>北京</option>    <option value="4">香港</option>  </optgroup></select>