HTML常用表单元素使用?

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

<form action="提交数据的路径" method="POST/GET">
文本框:<input type="text" value="值" placeHoLder="输入框提示" id="id" disabled="禁用" readonly="只读" required="输入框必填" hidden="隐藏" pattern="正则表达式" maxlength="最大长度"
minlength="最小长度" size="输入框的长度">
密码:<input type="password" value="值">
email输入框:<input type="email" value="值">
数字输入框:<input type="number" value="值">
手机号输入框:<input type="tel" value="值">
url:<input type="url" value="值">
文件:<input type="file" value="值">
滑块:<input type="range" value="值">
搜索:<input type="search" value="值">
单选框:<input type="radio" value="值">
复选框:<input type="checkbox" value="值">
下拉框:<select name="名字"><option value="值" selected默认第一个显示>option>select>
文本域:<textarea value="值">textarea>
提交:<input type="submit" value="值">
重置:<input type="reset" value="值">
按钮:<input type="button" value="值">
form>

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

（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="普通按钮">