html5 表单

1.创建表单

表单以form开始标签开始

以form结束标签结束

 

 

form标签属性:最重要的是action和method

action是服务器处理脚本的url

method的值要么是get,要么是post

 

 

2.对表单进行组织

fieldset

legend

如果要输入legend,则legend必须是fieldset的第一个子元素

如果不输入legend,则创建一个标题来识别属于fieldset的控件

 

 

3.创建文本框

用到的元素:

label

input

在input中用到的属性:

type(文本框的type属性为”text”)

name

value

placeholder

require

autofocus

size

maxlength

autocomplete(可用于form,设置为off可取消自动补全提示)

pattern(验证文本字段,正则表达式)

 

4.为表单组件添加说明标签

<label>

可以为标签添加for属性

for的内容和表单元素的id属性一样,这样就可以将标签和对应的表单组件关联起来

 

5.创建密码框、电子邮件框、搜索框、电话框和url框

分别为

type = password

Email

Search

Tel

Url

 

其他和文本框一样

 

6.创建单选按钮

type = “radio”

 

可以设置checked=”checked”让按钮在页面打开时默认激活

一组单选按钮只能设置一个checked

 

 

7.创建复选框

type = “checkbox”

 

 

8.创建文本区域

用textare元素

<textarea id=””   name=””   cols=””   rows=”” >

</textarea>

 

在css样式表中,文本区域的resize设置为none,那么用户无法在页面中更改textarea显示区域的大小

 

 

9.创建选择框

用select元素、option元素

<select id=”” name=””>

<option value=””>name</option>

</select>

 

 

select元素的属性:

size

multiple

 

如果选项很多,可以进行分组

<optgroup label=””>

 

 

10.上传文件

首先,正确设置enctype属性

其次,创建input type=”file”元素

 

enctype属性保证文件采用正确的格式上传

enctype=”multipart/form-data”

 

 

 

11.创建隐藏字段

隐藏字段可以理解为不可见的文本框,一般用于储存先前表单收集的信息,以便和当前表单一起提交到服务器

type = “hidden”

<input type=”hidden”   name=”step”   value=”6″ />

 

 

12.创建提交按钮

<input   type=”submit”  value=””  />

由于通常不需要提交按钮的键值对,所以不需要设置name属性

如果有多个提交按钮,设置name和value属性,以便让服务器知道是哪个按钮

 

提交按钮可以是文本,或者图像,或者两者结合

创建图像的提交按钮

<input type=”image” src=”” alt=”” />

 

创建图像文本结合的提交按钮

使用button元素可以创建包含其他html元素的按钮(不只是图像和文本)

<button type=”submit”>

<img src=”” alt=”” />button_name

</button>

 

如果有一个以上的提交按钮,应避免使用button

 

 

13.创建重置按钮

<input type=”reset” />

<button type=”reset”>Reset</button>

 

 

14.禁用表单

用disabled属性

 

文本区域和文本框可以设置disabled属性和readonly属性。这样表单就不能修改

readonly属性可以获得焦点,选择和复制

 

 

15.根据状态为表单设置样式

状态为:

focus 获得焦点的字段
checked 选中的单选按钮或复选框
disabled 具有disabled属性的字段
required 具有required属性的字段
optional 与required相反
invalid 其值与pattern属性给出的模式不匹配;或与url、email格式不匹配;或标记了required但却是空的字段
valid 与invalid相反

 

textarea(用于可以容纳好几行字段的文本框)

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注