<!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" οnclick="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"> 下一节</a>
</body>
</html>
笔记123
最新推荐文章于 2024-07-14 11:42:14 发布
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
