HTML5页面基础（二）form表单

最新推荐文章于 2021-07-03 17:49:36 发布

小白Melody

最新推荐文章于 2021-07-03 17:49:36 发布

阅读量238

点赞数

分类专栏： HTML5 文章标签： HTML5页面基础（二）form表单

本文链接：https://blog.csdn.net/weixin_42468092/article/details/100925130

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表单form标签

运行效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册界面：表单和各输入框综合应用</title>
	</head>
	<body>
		<form action="http:www.meishihui68.com.cn/FormTest.ashx" method="post" enctype="multipart/form-data">
			<div>
				<span>用户名：</span>
				<input type="text" placeholder="请输入用户名" required name="uname" />
				<input type="button" value="检查用户名是否存在" />
			</div>
			<div>
				<span>密码：</span>
				<input type="password" placeholder="亲输入密码" required name="upass" />
			</div>
			<div>
				<span>确认密码：</span>
				<input type="password" placeholder="请确认密码" required />
			</div>
			<div>
				<span>区域：</span>
				<select name="uprov">
					<option value="sichuan">四川省</option>
					<option value="hunan">湖南</option>
					<option value="guangdong">广东省</option>
				</select>
			</div>
			<div>
				<span>性别：</span>
				<input type="radio" name="ugender" checked value="boy" />男
				<input type="radio" name="ugender" value="girl" />女
			</div>
			<div>
				<span>年龄：</span>
				<input type="number" name="uage" value="20" min="20" max="30" step=1/>
			</div>
			<div>
				<span>生日：</span>
				<input type="date" name="udate" />
			</div>
			<div>
				<span>手机号</span>
				<input type="tel" name="utel" required />
			</div>
			<div>
				<span>头像</span>
				<input type="file" name="uphoto" />
			</div>
			<div>
				<span>主页：</span>
				<input type="url" name="uurl" required/>
			</div>
			<div>
				<span>Email:</span>
				<input type="email" name="uemail" required />
			</div>
			<div>
				<span>喜欢的颜色：</span>
				<input type="color" name="ubackcolor"  />
			</div>
			<div>
				<input type="checkbox" checked/>同意服务条款
			</div>
			<div>
				<input type="submit" value="注册"/>
				<input type="reset" value="取消"/>
			</div>
		</form>
	</body>
</html>

知识要点：
form:
method属性：用于规定如何发送表单的数据，分为get和post两种方式。get方式常用于传输的数据量小，且会显示在url后面；post方式常用于传输的数据量较大，且不会显示在url后面。
action属性：服务器的url
enctype属性：编码方式
input:
type属性：设置标签样式，如text用来输入文本；password用来输入密码；还有button,radio,checkbox,submit,image,reset,hidden,file,email,url,tel,search,color等
placeholder属性：提供输入框相关提示信息
required属性：表示必须填入数据
pattern属性：用于规范数据必须为正则表达式
disable属性：用于禁用input类型的输入框。