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

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

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

一、用户交互表单的属性

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知道一点点

bootstrap快速入门笔记(七)-表格,表单

2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

28930
来自专栏React Native开发圈

React Native悬浮按钮组件

因为用到了react-native-vector-icons图标组件,需要做下link。如果你项目中已经使用了react-native-vector-icons...

34720
来自专栏CDA数据分析师

【爬虫基础】网页是怎么构成的?

作者 张俊红 本文为 CDA 志愿者张俊红原创作品,转载需授权 所谓的网络爬虫就是从网页中指定位置找到对应的数据并下载,要想知道数据在什么位置,我们需要首...

26250
来自专栏别先生

HTML入门的简单学习

1:HTML简介     1.1:HTML(Haper Text Markup language):超文本标记语言     超文本就是指页面内可以包含图片,链接...

634100
来自专栏杨龙飞前端

checkbox的常见问题

24750
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——ImageTabBar控件的使用方式

获得和设置标签栏单元集合,打开集合编辑器,并点击“添加”,分别填写ImageResourceID(菜单项图片名称),SelectImageResourceID(...

8330
来自专栏闻道于事

其他标签及框架集

今天学习了其他一些标签以及框架集。 <marquee> ... </marquee> 1 <marquee direction="down" heigh...

33270
来自专栏一“技”之长

Tkinter之Menu组件用法 原

    开发工具类桌面应用使用Python、Java这类语言是一种不错的选择,他们的GUI库都可以很好的支持跨平台特性。本系列博客主要总结Tkinter库中提供...

13320
来自专栏十月梦想

移动端开发样式初始化

在移动端开发,需要解决在移动端下的一些样式初始化,防止在设备出现不同的效果,下面我们看下,需要解决移动端的那些样式需要初始化!

12620
来自专栏极客编程

jQueryMobile快速入门

  jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动...

15420

扫码关注云+社区

领取腾讯云代金券