HTML表单

最新推荐文章于 2024-07-08 22:44:43 发布

妧徽

最新推荐文章于 2024-07-08 22:44:43 发布

阅读量62

点赞数 1

分类专栏：笔记整理文章标签： html html5

本文链接：https://blog.csdn.net/woiyuan/article/details/138661621

版权

笔记整理专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表单</title>
	</head>
	<body>
		<!-- HTML的表单：
			1.<form>元素定义HTML表单；
			2.表单元素有<input>(重要的表单元素),元素状态有<text>(常规文本输入),<radio>(定义单选按钮输入),<submit>(定义提交表单);
			3.action属性定义在提交表单时执行的动作
			4.Method属性规定提交表单时所用的HTTP方式(GET或POST)
				使用GET时表单数据在页面地址栏中是可见的，适用与少量数据提交没有敏感信息。
				POST的安全性更好，在页面地址栏中被提交的数据是不可见的，适用与含敏感信息时使用。
				一般浏览器会默认使用GTE
			5.Name属性，如果要表格要正确被提交每个输入字段必须设置一个name属性
			6.fieldset元素组合表单中的相关数据，legend元素为fieldset元素定义标签
			7.target属性规定提交表单后在何处显示响应（_blank(响应在新窗口或选项卡),_self(默认，在当前窗口显示),_parent(响应显示在夫框架中),_top(显示在窗口的整个body中),framename(响应在命名的iframe中)）。
			8.Autocomplete属性规定表单是否应自动完成功能。
			9.Novalidate属性设置时规定它不应验表单数据。
			10.select元素指下拉菜单
			11.option元素定义带选择的选项，列表通常会把首个选项显示为被选选项，可添加selected属性定义预定义选项（更改默认选项）
			12.textarea元素定义多行输入字段（文本域）
			13.button元素定义可点击按钮
			14.HTML5新表单元素
				1.datalist使输入显示可选择选项（！注意input元素的list属性中必须引用其id属性）
			15.HTML的输入类型：
				*text定义供文本的单行输入字段
				*password定义密码字段（字符会被做掩码处理）
				*submit定义提交表单数据至表单处理程序（若忘记输入value属性则会获取默认文本"提交"）
				*radio定义单选按钮
				*checkbox定义复选框即可选择多个选项
				*button定义按钮
				*number用于应该包含数字值的输入手段（能限制其输入的字段数量）
					输入限制有：disabled规定输入字符应该被禁用
							  max规定输入字符的最大值
							  maxlength规定输入最大字符数
							  min规定输入字段的最小值
							  pattern规定通过其检查输入值的正则表达式
							  readonly规定输入字段为只读（无法修改）
							  required规定输入字段是必须的（必须填写）
							  size规定输入字符的宽度（以字符记）
							  step规定输入字段的合法数字间隔
							  value规定输入字段的默认值
				*date用于输入包含日期的输入字段（部分浏览器会出现日期选择器），可添加限制。
				*color用于包含颜色的输入字段（部分浏览器会出现颜色选择器）
				*range用于应该包含一定范围内的值的输入字段（输入字段在部分浏览器会显示为滑块控件）
				*month允许用户选择月份和年份（部分浏览器会出现日期选择器）
				*week允许用户选择周和年（部分浏览器会出现日期选择器）
				*time允许用户选择时间无时区（部分浏览器会出现时间选择器）
				*datetime允许用户选择日期和时间（有时区）（部分浏览器会出现日期选择器）
				*datetime-local允许用户选择日期和时间无时区（部分浏览器会出现日期选择器）
				*email用于应该包含电子邮件地址的输入字段（部分浏览器会在提交时自动检验电子邮箱地址）
				*search用于搜索字段（类似常规文本字段）
				*tel用于应该包含电话号码的输入字段
				*url用于包含URL地址的输入字段
			16.form属性规定了input元素所属的一个或多个表单，引用多个表单时请使用空格分隔表单id列表。
			17.formaction属性规定当提交表当时处理该输入的控件的文件的URL（会覆盖from元素中的action属性）
			18.formenctype属性规定表单数据（form-data）提交至服务器时如何对其进行编码（仅供method="post"的表单）
			   该属性会覆盖form元素中的enctype属性，适用与type="submit/image"
			19.formmethod属性定义向action URL发送表单数据的HTTP方式。会覆盖form元素的method属性；适用与type="submit/image"
			20.formnovalidate属性规定提交表单时不对input元素验证，会覆盖form元素中的novalidate属性；适用与type="submit"
			21.formtarget属性规定的名称或关键词指示提交表单后在何处显示接受到的响应，会覆盖from标签中的target属性；适用与type="submit/image"
			22.height与width属性规定元素的高与宽，仅用于type="image"
			23.list属性引用<datalist>元素中包含了input元素的预定义选项
			24.multiple属性允许用户在input元素中输入一个或一个以上的值。适用与email和file。
			25.pattern属性规定用于检查input元素值的正则表达式
			26.placeholder属性规定用以描述输入字段预期值的提示 -->
		<h1>HTML的表单</h1>
			<form target="_blank">
				<p>包含了1.和7.</p>
				<span>1.这是一个表单</span>
				<button>提交</button>
			</form>
			<form action="action处理网页" method="get" autocomplete="off">
				<p>该表单包含1~6和8~14</p>
				<fieldset>
				<legend>用户基本信息</legend>
				<span>请输入用户名</span>
				<input type="text" name="yhm"/>
				<br />
				<span>请选择你的性别</span>
				<input type="radio" name="sex"/>男
				<input type="radio" name="sex"/>女
				<br />
				<select name="学科">
					<option value="sx">数学</option>
					<option value="yw">语文</option>
					<option value="yy">英语</option>
					<option value="qd" selected>前端</option>
				</select>
				<br />
				<span>请输入你选择该科目的原因：</span>
				<textarea>这里是文本域</textarea>
				<br />
				<button type="button" onclick="alert(都说了别点我)">别点我</button><br />
				<input list="ah"/>
				<datalist id="ah">
					<option value="足球">
					<option value="篮球">
					<option value="读书">
					<option value="唱歌">
					<option value="听歌">
				</datalist>
				<p><input type="submit" value="提交"/></p>
				</fieldset>
			</form>
		<!-- 日后补齐 -->
		<br />
		<a href="7.HTML表格.html" style="text-decoration:none">上一节</a>
		<a href="9.（块）盒子属性.html" style="text-decoration:none">&nbsp;下一节</a>
	</body>
</html>