HTML 表单用于收集用户的输入信息。
表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素
一般格式:
<from name="名字" action="提交的路径" method="POST/GET">
from>
:
作用:指定提交表单数据时要使用的 HTTP 方法
使用get方式(默认)语法:< form action=“/action_page.php” method=“get” >
使用post方式语法< form action=“/action_page.php” method=“post”>
两种方法的一个明显区别是,get提交的参数在浏览器的地址栏中可见,而post则不可见。如果表单数据包含敏感信息或个人信息,请务必使用 POST!
:
input表示输入框,有多种形式,可以根据type属性来确定显示哪种输入框
type | 说明 |
---|---|
text | 单行文本输入框 |
password | 密码输入框 |
email输入框 | |
number | 数字输入框 |
tel | 手机号输入框 |
url | url输入框 |
file | file输入框 |
range | 滑块输入框 |
search | 搜索 |
radio | 单选框 |
checkbox | 复选框 |
submit | 提交 |
reset | 重置 |
button | 按钮 |
代码:
<form action="提交数据的路径" method="POST/GET">
文本输入框:<input type="text" value="值" placeHolder="输入框提示" id="id" name="输入框名字" disabled="禁用" readonly="只读" required="输入框必填" hidden="隐藏"
pattern="正则表达式" maxLength="最大长度" minLength="最小长度" size="输入框的长度">
<br>
密码输入框:<input type="password" value="值">
<br>
email输入框:<input type="email" value="值">
<br>
数字输入框:<input type="number" value="值">
<br>
手机号输入框:<input type="tel" value="值">
<br>
url:<input type="url" value="值">
<br>
文件:<input type="file" value="值">
<br>
滑块:<input type="range" value="值">
<br>
搜索:<input type="search" value="值">
<br>
单选按钮:<input type="radio" value="值">
<br>
复选框:<input type="checkbox" value="值">
<br>
提交:<input type="submit" value="提交">
<br>
重置:<input type="reset" value="重置">
<br>
按钮:<input type="button" value="按钮">
form>
:
属性 | 说明 |
---|---|
type | 类型 |
value | 值 |
placeholder | 输入框提示 |
id | id |
name | 输入框名字 |
disabled | 禁用 |
readonly | 只读 |
required | 必填 |
hidden | 隐藏 |
pattern | 正则表达式 |
size | 长度 |
maxLength | 最大长度 |
minLength | 最小长度 |
:
select
option
语法: < option value=“value” disabled selected >
演示:
城市:<select name="名字" id="id">
<option value="值"> 北京option>
<option value="值"> 上海option>
<option value="值"> 广州option>
类型为布尔属性,设置默认预选项,被预选的选项会显示在下拉列表最前面的位置
城市:<select name="名字" id="id">
<option value="值"> 北京option>
<option value="值"> 上海option>
<option value=" 值" selected > 广州option>
语法:< textarea name=“text” maxlength=“number” >
语法:< button name=“name” type=“type” value=“value” >
属性 | 按钮类型 |
---|---|
button | 为普通按钮 |
reset | 重置按钮 |
submit | 提交按钮。 |
:
OK,以上就是关于表单元素的全部使用啦