标签之美十——用户交互元素

标签之美——用户交互元素

任何一个网页都会提供用户交互的功能，包括账号密码的提交，留言板等用户信息的的获取。

一、用户交互表单的属性

表单使用<form></form>来创建。

1、跳转链接属性

表单的跳转是在提交数据后跳转到指定的URL，使用action属性，如下：

?

1 2	< form  action = "http://" > </ form >

2、传递数据的方式

表单跳转传递数据时可以设置一个传递方式，使用method可以设置方式为get或者post,delate,put：

?

1 2	< form  action = "http://"  method = "get" > </ form >

3、表单名称

表单可是设置一个名称，通过name属性来设置：

?

1 2	< form  name = "my"  action = "http://"  method = "get" > </ form >

二、输入表单

输入表单使用<input/>创建，必须在表单元素中

?

1 2 3

< form  name = "my"  action = "http://"  method = "get" > < input /> </ form >

效果如下：

1、输入文本框

输入表单有type属性可以用来设置类型：

?

1 2 3

< form  name = "my"  action = "http://"  method = "get" > 文本框< input  type = "text"  name = "文本框" /> <!--name:表单名称--> </ form >

效果如下：

2、密码输入框

?

1 2 3

< form  name = "my"  action = "http://"  method = "get" > 密码框< input  type = "password"  name = "密码框" /> <!--name:表单名称--> </ form >

效果如下：

3、输入单选框

设置type=radio可以创建单选框，单选框需要设置几个属性，同一系列的单选框必须有相同的name值，不相同的value值，可以通过添加checked键值来设置默认选中，示例如下：

?

1 2 3 4 5

< form  name = "my"  action = "http://"  method = "get" > < input  type = "radio"  name = "性别"  value = "男"  checked/>男 < br /> < input  type = "radio"  name = "性别"  value = "女" />女 </ form >

效果如下：

4、输入复选框

和单选框相似，可以使用type=checkbox创建复选框:

?

1 2 3 4 5 6 7

< body > < form  name = "my"  action = "http://"  method = "get" > < input  type = "checkbox"  name = "爱好"  value = "HTML"  checked/>HTML < br /> < input  type = "checkbox"  name = "爱好"  value = "iOS" />iOS< br /> < input  type = "checkbox"  name = "爱好"  value = "android" />android </ form >

效果如下：

5、提交按钮

使用type=submit来创建提交按钮，value值为按钮显示的文字：

?

1 2 3 4 5 6 7

< form  name = "my"  action = "http://"  method = "get" > < input  type = "checkbox"  name = "爱好"  value = "HTML"  checked/>HTML < br /> < input  type = "checkbox"  name = "爱好"  value = "iOS" />iOS< br /> < input  type = "checkbox"  name = "爱好"  value = "android" />android< br /> < input  type = "submit"  value = "提交" /> </ form >

效果如下：

6、重置按钮

?

1 2 3 4 5 6

< form  name = "my"  action = "http://"  method = "get" > < input  type = "checkbox"  name = "爱好"  value = "HTML"  checked/>HTML < br /> < input  type = "checkbox"  name = "爱好"  value = "iOS" />iOS< br /> < input  type = "checkbox"  name = "爱好"  value = "android" />android< br /> < input  type = "reset"  value = "重置" />

效果如下：

点击重置按钮后，输入的内容会被重置。

7、图像按钮

图像按钮和普通按钮的用法相似，设置type=image可以创建图像按钮，只是这个按钮多了一个src的属性用来设置图片的路径地址。

三、下拉列表

通过<select></select>和<option></option>标签来设置下拉菜单和其中的选项，示例如下：

?

1 2 3 4 5 6 7

< form  name = "my"  action = "http://"  method = "get" > < select  name = "下拉框" > < option  value = "爱好"  selected>HTML</ option > < option  value = "爱好" >iOS</ option > < option  value = "爱好" >android</ option > </ select > </ form >

效果如下：

四、文本输入框

使用<textarea></textarea>来设置文本输入框，属性rows和clos可以分别设置输入框的行数和列数，示例如下：

?

1 2 3 4

< form  name = "my"  action = "http://"  method = "get" > < textarea  name = "文本输入框"  rows = "5"  cols = "50" > </ textarea > </ form >

效果如下：