标签之美十——用户交互元素
2015-07-02 00:00
701 查看
标签之美——用户交互元素
任何一个网页都会提供用户交互的功能,包括账号密码的提交,留言板等用户信息的的获取。一、用户交互表单的属性
表单使用<form></form>来创建。1、跳转链接属性
表单的跳转是在提交数据后跳转到指定的URL,使用action属性,如下:<form action="http://"> </form>
2、传递数据的方式
表单跳转传递数据时可以设置一个传递方式,使用method可以设置方式为get或者post,delate,put:<form action="http://" method="get"> </form>
3、表单名称
表单可是设置一个名称,通过name属性来设置:<form name="my" action="http://" method="get"> </form>
二、输入表单
输入表单使用<input/>创建,必须在表单元素中<form name="my" action="http://" method="get"> <input/> </form>
效果如下:
1、输入文本框
输入表单有type属性可以用来设置类型:<form name="my" action="http://" method="get"> 文本框<input type="text" name="文本框"/><!--name:表单名称--> </form>
效果如下:
2、密码输入框
<form name="my" action="http://" method="get"> 密码框<input type="password" name="密码框"/><!--name:表单名称--> </form>
效果如下:
3、输入单选框
设置type=radio可以创建单选框,单选框需要设置几个属性,同一系列的单选框必须有相同的name值,不相同的value值,可以通过添加checked键值来设置默认选中,示例如下:<form name="my" action="http://" method="get"> <input type="radio" name="性别" value="男" checked/>男 <br/> <input type="radio" name="性别" value="女"/>女 </form>
效果如下:
4、输入复选框
和单选框相似,可以使用type=checkbox创建复选框:<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值为按钮显示的文字:<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、重置按钮
<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>标签来设置下拉菜单和其中的选项,示例如下:<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可以分别设置输入框的行数和列数,示例如下:<form name="my" action="http://" method="get"> <textarea name="文本输入框" rows="5" cols="50"> </textarea> </form>
效果如下:
专注技术,热爱生活,交流技术,也做朋友。
——珲少 QQ群:203317592
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 通过Mootools 1.2来操纵HTML DOM元素
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 谈谈网页设计中的字体应用Font Set
- 没有文件大小限制并免费的PDF到HTML转换工具
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码
- HTML <!DOCTYPE> 标签
- asp中实现清除html的函数
- 网页设计中的 serif 和 sans-serif字体应用
- Android的TextView与Html相结合的具体方法
- jQuery设置和获取HTML、文本和值示例
- 『jQuery』.html(),.text()和.val()的概述及使用