form表单的总结

最新推荐文章于 2021-10-26 14:07:17 发布

雾山雨巫

最新推荐文章于 2021-10-26 14:07:17 发布

阅读量377

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_21921805/article/details/117232655

版权

form标签用于为用户输入创建 HTML 表单。

表单包含了input元素能够实现输入用户名密码等文本框和单选复选以及其他的一些按钮功能。

下面是简单的登录功能的实现：

<html>
<head>
	<title>表单</title>
</head>
<body>
	<form name="biaodan" action="test.html" method="get" >
		<p>用户名：<input type="text" name="UserName"></p>
		<p>密  码：<input type="password" name="UserPassword"></p>
		<input type="submit" value="登录">
	</form>
</body>
</html>

一、form表单的属性

action：一个URL地址，指定form表单向何处发送数据。
name：给表单定一个名字。
method="get/post"：以何种方式向服务器发送数据注：(get较post安全性较低，会将登录信息显示在地址栏上)。

二、form表单元素

表单标签：指<form></form>本身。
表单域：用来收集用户输入，用input标签定义。
表单按钮：提交表单中所有的信息到服务器。
textarea：多行文本框,cols与rows可以定义文本框的大小
text：文本框
password：密码框，用户所输入的文本会自动隐藏
submit：提交按钮
radio：单选按钮
checkbox：复选按钮
button：按钮
reset：复位按钮
image：图像按钮
file：文件域，用于上传文件
selec下拉标签与option的标签用于定义列表中的可用选项。
readonly：该字段为只读，不能做任何修改
disabled：禁用Input元素，不可用
required：提交信息为空时进行提示
autofocus：页面打开时会自动获取光标
maxlength 元素接受字符个数的上限
checked 元素是否被选中
placeholder 输入时消失

以下为html5中type的元素:

email：邮箱对邮箱进行规范性输入
number：数字输入可以通过上下箭头进行加减
color：颜色选择框
date：日期选择框
datetime-loca：本地时间和日期
time：时间框
range ：进度条

一个简易的注册界面如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>注册页面</title>
</head>
<body bgcolor="#C0C0C0">
	<form align="center" method="post">
		<h1>用户注册</h1>
		<p>用户名：<input type="text" name="username" placeholder="请输入用户名"></p>
		<p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd" autofocus="" placeholder="请输入密码" required=""></p>
		<p>请选择你的性别：
			<input type="radio" name="gender">男
			<input type="radio" name="gender">女
		</p>
		<p>请选择你的爱好：
			<input type="checkbox" name="多选">足球
			<input type="checkbox" name="多选">篮球
			<input type="checkbox" name="多选">LOL
			<input type="checkbox" name="多选">韩剧
			<input type="checkbox" name="多选">王者荣耀
		</p>
			<p>邮箱：<input type="mail" name="" placeholder="请输入您的邮箱"></p>
			<p>用户头像：<input type="file" name=""></p>
			<p>您的家庭住址是：
			<select>
				<option>西安</option>
				<option>永川</option>
				<option>江北</option>
				<option>万州</option>
			</select></p>
			<p>您的收货住址是：
			<select multiple="">
				<option>请选择您的收货地址</option>
				<option>西安</option>
				<option>永川</option>
				<option>江北</option>
				<option>万州</option>
			</select></p>
			<p>请留下您的建议或者意见：<textarea rows="10" cols="30" >您的建议或者意见!</textarea></p>
			<p>
				请选择您喜欢的颜色：<input type="color" name="">
				注册的时间：<input type="datetime-local" name="">
			</p>
			<p>
				<input type="submit" name="" value="注册">
				<input type="reset" name="" value="重置">
			</p>

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

注册界面

雾山雨巫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
form表单的总结

form标签用于为用户输入创建 HTML 表单。表单包含了input元素能够实现输入用户名密码等文本框和单选复选以及其他的一些按钮功能。下面是简单的登录功能的实现：<html><head> <title>表单</title></head><body> <form name="biaodan" action="test.html" method="get" > <p>用户名：<in
复制链接

扫一扫