标签之美十——用户交互元素-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介:

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

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

一、用户交互表单的属性

表单使用<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>

效果如下:

101609_OI3b_2340880.png

1、输入文本框

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

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

效果如下:

102105_BdCd_2340880.png

2、密码输入框

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

效果如下:

102542_t0Xp_2340880.png

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>

效果如下:

130212_gwhl_2340880.png

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>

效果如下:

130842_aceK_2340880.png

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>

效果如下:

131404_8ym6_2340880.png

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="重置"/>

效果如下:

131716_38bl_2340880.png

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

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>

效果如下:

133151_i6VM_2340880.png

四、文本输入框

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

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

效果如下:

133634_F7C2_2340880.png


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: