博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

千呼万唤 HTML 5 (7) - 表单元素

Posted on 2012-02-08 10:10  webabcd  阅读(3602)  评论(4编辑  收藏

[索引页]
[源码下载] 


千呼万唤 HTML 5 (7) - 表单元素



作者:webabcd



介绍
HTML 5: 表单元素

  • 表单元素 - form, label, button, select, option, optgroup, datalist, textarea, fieldset, legend, progress, meter, keygen, output
  • 表单验证



示例
1、form - 表单
element/form/form.html

<!doctype html>
<html>
<head>
<title>form</title>
</head>
<body>

<!--
form - 表单,用于提交子元素数据到服务端
accept-charset - 指定提交数据的编码格式
action - 提交的目标地址
autocomplete - 是否对所有子元素启用自动完成功能(on 或 off)
enctype - 编码类型(application/x-www-form-urlencoded 或 multipart/form-data 或 text/plain)
method - form 的 method(默认是 GET)
name - form 的 name
novalidate - 提交时是否不需要验证,boolean 类型
target - form 的 target
-->

<form action="#">
<input type="text" name="txt" value="webabcd" />
<input type="submit" name="btn" value="submit" />
</form>

</body>
</html>


2、label - 关联其它元素
element/form/label.html

<!doctype html>
<html>
<head>
<title>label</title>
</head>
<body>

<!--
label - 关联其它元素
form - 指定 label 所属的表单,多个用空格分开
for - 关联元素的 id

DOM
form, htmlFor
control - 返回 label 所关联的元素
-->

<label><input type="checkbox" /> checkbox title</label>

<br />

<input id="chk" type="checkbox" />
<label id="lbl" for="chk">checkbox title</label>

<script type="text/javascript">
var lbl = document.getElementById("lbl");
alert(document.getElementById(
"lbl").htmlFor);
alert(document.getElementById(
"lbl").control.outerHTML);
</script>
</body>
</html>


3、button - 按钮元素
element/form/button.html

<!doctype html>
<html>
<head>
<title>button</title>
</head>
<body>

<!--
button - 按钮元素
autofocus - 页面加载后是否自动置为焦点,boolean 类型
disabled - 是否无效,boolean 类型
form - 指定关联的 form 的 id
formaction - 指定关联 form 的 action
formenctype - 指定关联 form 的编码类型
formmethod - 指定关联 form 的 method
formnovalidate - 指定关联 form 在提交时是否不需要验证,boolean 类型
formtarget - 指定关联 form 的 target
type - 按钮类型(button 或 submit 或 reset)
-->

<button type="button">button</button>

</body>
</html>


4、select - 下拉列表框元素, option - 选项, optgroup - 选项组
element/form/select_option_optgroup.html

<!doctype html>
<html>
<head>
<title>select option optgroup</title>
</head>
<body>
<!--
select - 下拉列表框元素
autofocus, disabled, form, name, required, size
multiple - 是否可多选,boolean 类型

option - 选项
disabled, label, selected, value

optgroup - 选项组
disabled, label
-->

<select>
<option value="1" label="aaa" />
<option value="2" label="bbb" />
<option value="3" label="ccc" selected />
<option value="4" label="ddd" />
<option value="5" label="eee" />
</select>

<select multiple>
<option value="1">aaa</option>
<option value="2">bbb </option>
<option value="3" selected>ccc</option>
<option value="4" selected>ddd</option>
<option value="5">eee </option>
</select>

<select>
<optgroup label="optgroup 1">
<option value="1">aaa</option>
<option value="2">bbb </option>
</optgroup>
<optgroup label="optgroup 2">
<option value="3">ccc</option>
<option value="4">ddd </option>
</optgroup>
<optgroup label="optgroup 3">
<option value="5" selected>eee</option>
<option value="6">fff </option>
</optgroup>
</select>
</body>
</html>


5、datalist - 数据列表元素, option - 数据项
element/form/datalist_option.html

<!doctype html>
<html>
<head>
<title>datalist option</title>
</head>
<body>

<!--
datalist - 数据列表元素
option - 数据项
value - 数据项的值
label - 数据项的说明
-->

<input type="email" list="contacts" />

<datalist id="contacts">
<option value="aabb@aa.com" label="张三" />
<option value="ccdd@cc.com" label="李四" />
<option value="eeff@ee.com" label="王五" />
</datalist>

</body>
</html>


6、textarea - 文本区域元素
element/form/textarea.html

<!doctype html>
<html>
<head>
<title>textarea</title>
</head>
<body>

<!--
textarea - 文本区域元素
autofocus, dirname, disabled, maxlength, name, placeholder, readonly, required - 参考 /element/form/input/_attributes.html
cols - 显示的列数(单位:字符数)
rows - 显示的行数(单位:字符数)
wrap - 换行方式
soft - 需要换行则换行(相当于 wrap)
hard - 强制不换行(相当于 nowrap)
-->

<textarea cols="3" rows="3">
aaabbbccc
</textarea>

</body>
</html>


7、fieldset - 用于定义一个区域, legend - 用于定义一个区域的标题,它是 fieldset 的第一个子元素 
element/form/fieldset_legend.html

<!doctype html>
<html>
<head>
<title>fieldset legend</title>
</head>
<body>

<!--
fieldset - 用于定义一个区域
form - 指定所属表单,多个用空格分开
disabled - 是否无效(Opera 支持此标准)

legend - 用于定义一个区域的标题,它是 fieldset 的第一个子元素
-->

<fieldset disabled>
<legend>
<label>
<input type="checkbox" /> title
</label>
</legend>
<p>
p1
</p>
<p>
p2
</p>
<p>
p3
</p>
</fieldset>
</body>
</html>


8、progress - 进度元素 
element/form/progress.html

<!doctype html>
<html>
<head>
<title>progress</title>
</head>
<body>
<!--
progress - 进度元素
value - 当前进度值
max - 进度的最大值
form - 对应的 form 的 id
-->

<progress id="progress" max="100"></progress>

<script type="text/javascript">
var progressBar = document.getElementById('progress');
progressBar.value
= 10;
</script>

</body>
</html>


9、meter - 用来表示一个范围已知且可度量的值 
element/form/meter.html

<!doctype html>
<html>
<head>
<title>meter</title>
</head>
<body>

<!--
meter - 用来表示一个范围已知且可度量的值
form - 对应的 form 的 id
value - 当前值
min - 最小值
max - 最大值
low - 低水平的值
high - 高水平的值
optimum - 最适宜的值
-->

<span>血糖含量:</span>
<meter value="60" min="0" max="100" low="20" high="80" optimum="50" />

</body>
</html>


10、keygen - 呈现出一个键值对生成器,提交表单后,公钥发往服务端,私钥保存在客户端
element/form/keygen.html

<!doctype html>
<html>
<head>
<title>keygen</title>
</head>
<body>

<!--
keygen - 呈现出一个键值对生成器,提交表单后,公钥发往服务端,私钥保存在客户端
autofocus, challenge, disabled, form, keytype
-->

<keygen />

</body>
</html>


11、output - 用于呈现计算结果
element/form/output.html

<!doctype html>
<html>
<head>
<title>output</title>
</head>
<body>

<!--
output - 用于呈现计算结果(必须要有起始和结束标记)
form, name
for - 关联元素的 id,可以有多个
-->

<output id="output"></output>

<script type="text/javascript">

document.getElementById(
"output").value = 10 * 10;

</script>

</body>
</html>


12、表单验证
element/form/_validate.html

<!doctype html>
<html>
<head>
<title>表单验证</title>
</head>
<body>

<!--
表单验证(Opera 支持此标准)

required - 指定是否为必填元素
pattern - 用指定的正则表达式对 input 的值做验证
url, email, number 等有验证功能的元素

element.validity - 返回验证状态,ValidityState 对象
ValidityState - 验证状态对象
valid - 是否通过了验证(以下 8 个值都为 false,则此值为 true),boolean 类型
valueMissing - 是否没有值(对应的元素如果设置为必填但没有值的时候,此值为 true),boolean 类型
typeMismatch - 是否值的类型与期望类型不匹配,boolean 类型
patternMismatch - 是否正则表达式验证失败,boolean 类型
tooLong - 是否字符过多,boolean 类型
rangeUnderflow - 是否比预设的最小值还要小,boolean 类型
rangeOverflow - 是否比预设的最大值还要大,boolean 类型
stepMismatch - 是否不匹配 step 的设置(比如 step 为 3,那么如果值要匹配 step 的话,则一定要为 3 的倍数),boolean 类型
customError - 是否有自定义错误信息,boolean 类型

element.setCustomValidity("错误信息") - 用于指定自定义的错误信息
element.setCustomValidity("") - 用于清除自定义的错误信息
-->

<form action="#">
<input type="text" name="txt" id="txt" required />
<input type="email" name="email" id="email" />
<input type="submit" name="btn" value="submit" />

<br />
<input type="button" value="验证 email 元素" onclick="validateEmail();" />
</form>

<script type="text/javascript">

function validateEmail() {
var email = document.getElementById("email");
var validityState = email.validity;

alert
(
validityState.valid
+ "\n" +
validityState.valueMissing
+ "\n" +
validityState.typeMismatch
+ "\n" +
validityState.patternMismatch
+ "\n" +
validityState.tooLong
+ "\n" +
validityState.rangeUnderflow
+ "\n" +
validityState.rangeOverflow
+ "\n" +
validityState.stepMismatch
+ "\n" +
validityState.customError
);
}

</script>

</body>
</html>



OK
[源码下载]