html5: 新特性(表单)

表单:

在html4中,表单内的从属元素必须写在表单内部。在html5中,可以吧他们书写在页面任何位置,然后指定form属性,属性值为表单ID,这样就指定表单了。

formaction,formmethod,formentype

<body>
<form id="taskForm">
<input
type="text"
value="v1"
formnovalidate
formtarget="_blank|_self|_parent|_top|framename"
formenctype="application/x-www-form-urlencoded"
formmethod="POST" formaction="http://localhost:8080/test01.jsp">submit
</form>
<footer>
<button form="taskForm">submit</button>
</footer>
</body>

表单required and labels:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="taskForm">
<label for="txt_name">name:</label>
<input id="txt_name" type="text" name="txt_name">
<input id="btn_validate" type="button" value="validate" onclick="validateName()">
</form>
<script>
function validateName() {
var txtName = document.getElementById('txt_name');
var button = document.getElementById('btn_validate');
var form = document.getElementById('taskForm');
if (txtName.value.trim() == '') {
var label = document.createElement("label");
label.setAttribute("for", "txt_name");
form.insertBefore(label, button);
txtName.labels[1].innerHTML="please input txt_name";
txtName.labels[1].setAttribute('style', 'color:red')
}
}
</script>
</body>
</html>

control属性

<form id="taskForm">
<label id="label_zip">
name:
<input id="txt_zip" type="text" name="txt_zip" maxlength="6">
<small>请输入6位数字</small>
</label>
<input id="btn_validate" type="button" value="设置默认值" onclick="setDefault()">
</form>
<script>
function setDefault() {
var labelZip = document.getElementById('label_zip');
var labelbox = labelZip.control;
labelbox.value = "123465";
}
</script>

dataList元素:

<input type="text" name="greeting" list="greeting" autocomplete>
<datalist id="greeting" style="display: none">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</datalist>

image的width,height属性:

<input type="image" src="jkxy.png" width="20" height="20">
上一篇:cygwin 复制粘贴


下一篇:postgresql 14 正式版快速尝鲜体验