form表单

HTML表单详解与实例

最新推荐文章于 2023-05-04 17:23:36 发布

原创最新推荐文章于 2023-05-04 17:23:36 发布 · 607 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML中的<form>标签及其属性，包括GET和POST提交方式的区别。还展示了用户注册表单的实例，涉及input、select、textarea等元素的使用，以及不同类型的输入字段如text、password、radio、checkbox等。

一：概念

<form>标签用于创建HTML表单

form元素是块级元素，它的前后会拆行

表单用于向服务器传输数据，action指定向何处发送表单数据

表单可包含input、lable、textarea、select

二：表单中可包含input标签

type属性	含义
text	文本框(单行)
passward	密码框
submit	提交按钮
radio	单选按钮
checkbox	多选按钮
button	普通按钮
reset	重置按钮
image	按钮为图片
hidden	隐藏域（不建议）
file	文本域（并未真正选上文件）
email	邮箱输入
number	数字输入
color	颜色选择
date	日期
datetime-local	日期及时间
time	时间
range	进度条

lable标签是为input标签定义的标签（不会给用户展示任何样式）

三：可包含textarea标签

cols	以字符个数设定的多行文本框宽度
rows	以字符个数设定的多行文本框高度

四：可包含select标签

option	设置选项内容
multiple	将选项全部显示
selected	默认选项

五：常用属性method

常用有get和post，method属性规定如何发送表单数据

GET——用于从指定资源请求数据

（不安全，将name属性信息暴露在地址栏，地址默认大小64kb）

POST——用于将数据发送到服务器来创建/更新资源

（安全，不会暴露信息在地址栏）

	GET	POST
刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）
书签	可收藏为书签	不可收藏为书签
历史	参数保留在浏览器历史中	参数不会保存在浏览器中
对数据长度的限制	URL 的最大长度是 2048 个字符	无限制
安全性	所发送的数据是 URL 的一部分	参数不会被保存在浏览器历史或 web 服务器日志中
可见性	数据在 URL 中对所有人都是可见的	数据不会显示在 URL 中

六：表单展示

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习</title>
</head>
<body align=center bgcolor="#e3dede">
<h2>用户注册</h2>
<form methed="post" >
	<p>用户名:<input type="text" placeholder="请输入您的用户名"></p>
    <p>密码：<input type="pswd" placeholder="请输入您的密码" required autofocus></p>
    <p>请选择您的性别：<input type="radio" name="xb" value="男" >男
    <input type="radio" name="xb" value="女" >女</p>
    <p>请选择您的爱好：<input type="checkbox" name="hobby" value="足球" >足球 
    <input type="checkbox"  value="篮球">篮球
    <input type="checkbox"  value="LOL">LOL
    <input type="checkbox"  value="足球">足球
    <input type="checkbox" value="韩剧">韩剧
    <input type="checkbox"  value="王者荣耀">王者荣耀 </p>
    <p>邮箱：<input type="email" placeholder="请输入您的邮箱"></p>
    <p>用户头像：<input type="file" ></p>
    <p>您的家庭地址是：<select>
    	<option value="西安">西安</option>
    	<option value="上海">上海</option>
    	<option value="重庆">重庆</option>
    	<option value="湖南">湖南</option>
    </select></p>
       <p>您的收获地址是：<select multiple="">
    	<option value="永川">永川</option>
    	<option value="江北">江北</option>
    	<option value="万州">万州</option>
    	<option value="重庆">重庆</option>
    </select></p>
<p>请留下你的建议和意见：<textarea cols="20"  rows="15" placeholder="您的建议和意见"></textarea></p>
<p>请选择你喜欢的颜色：<input type="color">
注册的时间：<input type="datetime-local"></p>
<p><input type="submit" value="注册">
<input type="reset"></p>

	</form>
</body>
</html>