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

时间 2019-11-07

标签标签之美用户交互元素繁體版

原文原文链接

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

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

1、用户交互表单的属性

表单使用<form></form>来建立。post

一、跳转连接属性

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

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

二、传递数据的方式

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

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

三、表单名称

表单但是设置一个名称，经过name属性来设置：orm

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

2、输入表单

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

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

效果以下：get

一、输入文本框

输入表单有type属性能够用来设置类型：input

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

效果以下：it

二、密码输入框

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

效果以下：io

三、输入单选框

设置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>

效果以下：

四、输入复选框

和单选框类似，可使用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>

效果以下：

五、提交按钮

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

效果以下：

六、重置按钮

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

效果以下：

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

七、图像按钮

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

3、下拉列表

经过<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>

效果以下：

4、文本输入框

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

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

效果以下：

专一技术，热爱生活，交流技术，也作朋友。

——珲少 QQ群：203317592