表单标签:
场景:在网页中主要负责数据采集功能,如注册、登录等数据采集。
标签:<form>
表单项、表单元素:
不同类型的input元素、下拉列表、文本域等。
<input>: 定义表单项、通过type形式控制输入形式。
<select>: 定义下拉列表。
<textarea>: 定义文本域。
属性:
action:规定当提交表单时向何处发送表单数据,如URL。
method:规定用于发送表单数据的方式。GET、POST。
get方式:是从服务器中请求数据。
<!--
form表单属性:
action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
method: 表单的提交方式 .
get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
post: 在消息体(请求体)中传递的, 参数大小无限制的.
-->
<form action="" method="get">
用户名:<input type="text" name="username">
年龄:<input type="text" name="age">
<input type="submit" value="提交">
</form>
action:表单提交的URL,就是往什么地方提交数据,如果不指定的话,默认提交到当前页面。
这时,会在URL后面拼接表单数据。比如:?username=chang&age=12。URL的长度是有限制的。
get是默认值。
如果方式是post:也就是提交数据到服务器:
在消息体中传递的,参数大小没有限制。
注意:表单项必须要有name属性才可以提交。
表单项:
<input>: 表单项,通过type属性控制输入形式。
<select>:定义下拉列表,<option>定义列表项。
<testarea>:文本域。
<input> 表单项的type属性:
<select>: 下拉列表
文本域:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-表单项标签</title>
</head>
<body>
<!-- value: 表单项提交的值 -->
<form action="" method="post">
姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"> <br><br>
性别: <input type="radio" name="gender" value="1"> 男
<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
<label><input type="checkbox" name="hobby" value="game"> game </label>
<label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
图像: <input type="file" name="image"> <br><br>
生日: <input type="date" name="birthday"> <br><br>
时间: <input type="time" name="time"> <br><br>
日期时间: <input type="datetime-local" name="datetime"> <br><br>
邮箱: <input type="email" name="email"> <br><br>
年龄: <input type="number" name="age"> <br><br>
学历: <select name="degree">
<option value="">----------- 请选择 -----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br><br>
描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>
<label> 标签: 点击按钮和文字,都是可以被选中的。
hidden:隐藏域。以后看看实际中有什么应用。