Web前端开发 form标签相关用法和属性

form标签

---

html中的<form>标签，通常用于对用户信息的收集，form表单中需要使用<input>、<textarea>以及<select>标签完成各种功能的实现。

一、<input>标签及其相关属性

1.type属性

type属性用于设置<input>标签所设置的浏览器控件的类型

1.1.text

type属性设置为text时，将在表单中插入单行文本框控件

用户名:<input type="text">

效果如下

1.2.password

type属性设置为password时，将在表单中插入单行密码框控件，密码框控件可以使用特定字符来代替用户输入的内容，达到加密的目的

密   码:<input type="password">

效果如下

1.3.submit

type属性设置为submit时，将在表单中插入提交按钮控件，提交按钮可以将用户所填写的信息以特定的方式发送回指定的地址

<input type="submit" action="目标url" method="get/post" value="注册">

submit按钮须要使用action属性和method属性来指定发送表单信息的方法及目标地址

其中action属性的值为目标的url，method属性一般为get或者post

get和post两种请求方式都是让后台获取到数据，但是相对于get方法来说post方法更加安全

get方法会将name属性暴露在地址栏上，地址栏大小为64kb，而post方法不会暴露属性

效果如下

1.4.radio

type属性设置为radio时，将在表单中插入单选按钮控件，通常与label标签联用

请选择您的性别:<input type="radio" name="gender" id="男" value="男"><label for="男">男</label><input type="radio" name="gender" id="女" value="女"><label for="女">女</label>

效果如下

radio控件会在name属性相同的控件中只允许选择一个

<label>标签会和与for属性具有相同id值的radio控件进行链接，达到点击label中的文本就等价于点击radio控件的效果

1.5.checkbox

type属性设置为checkbox时，将在表单中插入多选按钮控件

checkbox控件与radio类似，不同于radio的是，checkbox会将有相同name属性值的控件内容链接在一起，且可从中选取多个

checkbox控件同样可以与label标签联用

请选择您的爱好:<input type="checkbox" name="hobby" id="足球"><label for="足球">足球</label><input type="checkbox" name="hobby" id="篮球"><label for="篮球">篮球</label><input type="checkbox" name="hobby" id="LOL"><label for="LOL">LOL</label><input type="checkbox" name="hobby" id="王者荣耀"><label for="王者荣耀">王者荣耀</label></p>

效果如下

1.6.reset

type属性设置为reset时，将在表单中插入重置按钮控件

reset控件用于清空用户输入的数据，将框中内容归为默认值

<input type="reset" name="重置" value="重置">

效果如下

1.7.button

type属性设置为button时，将在表单中插入按钮控件

按钮控件不同于提交按钮控件和重置按钮控件

button控件不附带任何效果，若想要button控件执行功能，则需要添加JavaScript语句以及事件

button,按钮<input type="button" name="" value="按钮">

效果如下

1.8.image

type属性设置为image时，将在表单中添加图片提交按钮，和submit按钮功能类似

image,图片提交按钮<input type="image" name=""  src="..\image\1.jpg" width=5% height=5%>

效果如下

1.9.hidden

type属性设置为hidden时，将会在表单中添加隐藏域，不推荐使用

因为用户界面没有任何显示，故不做演示

hidden,隐藏域(一般不建议使用)<input type="hidden" name="">

1.10.file

type属性设置为file时，将会在表单中添加文件选择控件

文件选择控件只是看起来选中了文件，实则没有选中，若想要真正选中文件则需要添加JavaScript语句

file,文件选择<input type="file" name="">

效果如下

1.11.email

type属性设置为email时，将会在表单中添加邮箱输入框控件

email控件会自动识别邮箱格式，并在为写入正确邮箱格式时禁止用户提交并弹出提示

email,会自动识别邮箱格式<input type="email" name="" placeholder="请输入邮箱">

效果如下

1.12.number

type属性设置为number时，将会在表单中添加数字选择控件

number控件需要使用max属性和min属性设置最大值和最小值，若超出这个范围则点击无反应

number,选取数字,用max和min设置最小值<input type="number" max="10" min="1" name="">

效果如下

1.13.color

type属性设置为color时，将会在表单中添加颜色选择器

通过颜色卡或者rgb值来选择颜色

color,选择颜色，rgb值或者色盘<input type="color" name="">

效果如下

1.14.date

type属性设置为date时，将会在表单中添加日期选择器

该日期选择器格式为    年/月/日   可以获取本地的日期

date,选择日期<input type="date" name="">

效果如下

1.15.datetime-local

type属性设置为datetime-local时，将会在表单中添加日期时间选择器

格式为 年/月/日 时：分   可以获取本地时间

datetime-local,获取本地日期时间<input type="datetime-local" name="">

效果如下

1.16.time

type属性设置为time时，将会在表单中添加时间选择器

格式为 时：分  可以获取本地当前时间

time,获取本地时间<input type="time" name="">

效果如下

1.17.range

type属性设置为time时，将会在表单中添加拖动条状选择器

可以通过拖动选择器的条来进行值的选择

range,拖动选择<input type="range" name="">

效果如下

2.其余常用属性

name---元素的名称

value---元素的值

id------元素的唯一标识符

size----以字符为个数设定元素的宽度

maxlength---------元素接受字符的上限

readonly------输入的字段是只读，不可做任何修改，属性值true(默认)/false 可不填写值

<input type="text" readonly name="">

disabled------禁用input元素,属性值true(默认)/false  可不填写值

<input type="text" disabled name="">

required-------如果提交时，input中的内容是空的，没有输入，禁止提交，提示"不能为空" 可不填写值

<input type="text" required name=""><input type="submit" value="提交">

autofocus------自动获取焦点（光标），打开页面时自动获取光标 可不填写值

<input type="text" autofocus name="">

二、<select>标签

select标签需要和option标签一起使用，select标签意为在表单中创建多选框，option标签内为选项

请选择你的城市：
		<select>
			<option value="北京">北京</option>
			<option value="深圳">深圳</option>
			<option selected value="广州">广州</option>
			<option value="上海">上海</option>
		</select>

效果如下

   

option中的selected属性是选择了默认值为广州

select标签还可以使用multiple属性设置为多行显示，用size来设置行数

您的收货地址是:
<select multiple="multiple" size="4" name="addr">
		<option>请选择您的收货地址</option>
		<option>永川</option>
		<option selected>江北</option>
		<option>万州</option>
</select>

效果如下

三、<textarea>标签

textarea标签是在需要输入大量内容，单行文本框不够使用时进行添加的控件，textarea可以使用cols和rows属性来完成大小的设置

cols的值代表每行的字符数量，rows的值为每列的字符数量

且添加好的textarea控件可以通过拖动右下角改变大小，当内容大于文本框时，将会自动显示滚动条

<textarea cols="50" rows="20" placeholder="这个家伙很懒，什么都没有留下！"></textarea>

可以使用placeholder属性设置默认内容

效果如下

 

以上便是对于<form>标签及其相关标签的用法和属性的总结，希望能够对您有所帮助。