HTML常用表单元素使用?

一、常用表单元素使用的关键字和介绍

(1)、表单介绍

在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签

(2)、表单属性

子属性：
输入框提示	placeHoLder
禁用	disabled
只读	readonly
输入框必填	required
隐藏	hidden
正则表达式	pattern
最大长度	maxlength
最小长度	minlength
输入框的长度	size

文本框	text
密码	password
数字输入框	number
email输入框	email
手机号输入框	tel
url	url
文件	file
滑块	range
搜索	search
单选框	radio
复选框	checkbox
下拉框	<select <option selected默认第一个显示 >
文本域	textarea
提交	submit
重置	reset
按钮	button

二、常用表单元素使用的效果与作用

（1）password : 保护用户的隐私

属性：password

密码:<input type="password" value="123456789">

(2) email: 输入邮件（比如QQ邮件）

属性：email

email输入框:<input type="email">

(3)、number : 输入框只能输入数字

属性：number

数字输入框:<input type="number" value="111">

（4）、tel : 常用于输入电话号

属性：tel

手机号输入框:<input type="tel" value="值">

（5）、url : 用于输入网址

属性：url

url:<input type="url" value="值">

（6）、file: 用于选择文件路径

属性：file

文件:<input type="file">

（7）、range：通常用于显示滑动条

属性：range

滑块:<input type="range" value="值">

（8）、search：通常用于当作搜索栏

属性：search

搜索:<input type="search" value="值">

（9）、radio：单选性别等

属性：radio
注意 ：把input的name设置一样才能实现单选

男<input type="radio" name="sex">
女<input type="radio" name="sex">

（10）、checkbox：和上一个相反，这个是多选

属性：checkbox

爱好 : <input type="checkbox">打篮球
<input type="checkbox">踢足球
<input type="checkbox">看书

（11）、select 标签和option 标签组合

属性：select 和 option
注 ：selected是默认显示

地区:<select name="名字">
    <option value="湖南">湖南</option>
    <option value="湖北" selected>湖北</option>
    <option value="广东">广东</option>
</select>

（12）、textarea 文本域：一般用于留言，会话等功能

属性：textarea

留言:<textarea value="很高兴认识你"></textarea>

（13）、submit 按钮：用于提交试题，个人资料等

属性：submit

提交:<input type="submit" value="提交按钮">

（14）、reset按钮 ：用于重置

属性：reset

重置:<input type="reset" value="重置按钮">

(15)、button按钮：普通按钮

属性：button

按钮:<input type="button" value="普通按钮">

总结:

一个完整的表单由表单控件(表单元素)、提示信息和表单域3个部分构成。

1、表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。
2、提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
3、表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义、处理表单数据所用程序的url地址及数据提交到服务器的方法。
注：如果不定义表单域，表单中的数据就无法传送到后台服务器。