表单新增元素与属性（control、placehoulder、list、AutoComplete、pattern、SelectionDirection、indeterminate属性）

标签的control属性
文本框的placehoulder属性
文本框的list属性
文本框的AutoComplete属性
文本框的pattern属性
文本框的SelectionDirection属性
复选框的indeterminate属性
image提交按钮的height属性与width属性

1.标签的control属性

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的control属性</title>

</head>
<body>
<script>
function setValue(){
var lable = document.getElementById("lable");
var textbox = lable.control;
textbox.value="122352";

}
</script>
<form>
<lable id="lable">
邮编：
<input id="txt_zip" maxlength="6"/>
<small>请输入六位数字</small>

</lable>
<input type="button" value="设置默认值" οnclick="setValue()"/>
</form>
</body>
</html>

效果演示：

2.文本框的placehoulder属性

代码演示：

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框的palceholder属性</title>

</head>
<body>
<input type="text" placeholder="请输入用户名">
</body>
</html>

效果演示：

3.文本框的list属性

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框的list属性</title>

</head>
<body>
<form>
<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display: none">
<option value="HTML学习">HTML学习</option>
<option value="Android学习">Android学习</option>
<option value="ios学习">ios学习</option>
</datalist>
</form>

</body>
</html>

效果演示：（可自己输入，可选择预设字段）

4.文本框的AutoComplete属性

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框的AutoComplete属性</title>

</head>
<body>
<input type="text" name="greeting" autocomplete="" list="greetings">
<datalist id="greetings" style="display: none">
<option value="HTML5学习">HTML5学习</option>
<option value="HTML5学习2">HTML5学习2</option>
<option value="HTML5学习3">HTML5学习3</option>
</datalist>

</body>
</html>

效果演示：

5.文本框的pattern属性

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框的pattern属性</title>

</head>
<body>
<form action="http://www.baidu.com">
请输入A-Z任意六位数
<input type="text" pattern="[A-Z]{6}" name="greeting">
<input type="submit">
</form>

</body>
</html>

效果演示：

6.文本框的SelectionDirection属性

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框的SelectionDirection属性</title>

</head>
<body>
<script>
function AD() {
var control=document.forms[0]['test'];
var Direction=control.selectionDirection;
alert(Direction);

}
</script>

<form>
<input type="text" name="test">
<input type="button" value="点击我进行测试" οnclick="AD()">
</form>

</body>
</html>

效果演示：（正向选择为forward,反向选择为backward,可以判断用户的操作行为）

7.复选框的indeterminate属性

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框的indeterminate属性</title>

</head>
<body>
<input type="checkbox" indeterminate id="cb">属性测试
<script>
var cb = document.getElementById("cb");
cb.indeterminate=true;
</script>

</body>
</html>

效果演示：（有选取、非选取、尚未明确三种状态）