html5新表单元素收集数据,HTML5表单元素新特新

1、新表单元素

全部都是由input标签组成

1.1 email

1.2 url

注意：输入的内容必须以http://

1.3 search

1.4 range

范围

属性:

min : 最小值

max : 最大值

step : 步长

value : 值

1.5 number

属性:

min : 最小值

max : 最大值

step : 步长

value : 值

1.6 color

通过windows的调色板选取颜色

1.7 date

弹出日历控件，选择年月日

值:2015-06-01

1.8 month

2015-06

1.9 week

2015-W13

1.10 datetime

2015-06-01T01:15Z

1.11 datetime-local

2、新表单属性

2.1 required

必须的，非空验证

2.2 multiple

在一个表单元素中，允许录入多段类型相同的数据，但必须由","作为分隔符

2.3 pattern

根据用户指定的正则表达式，对数据进行验证

2.4 autofocus

自动获取焦点

eg：

1

2

3

4

5

Document

6

7 table{

8 border:1px solid #1e90ff;

9 /*单边框设置*/

10 border-collapse:collapse;

11 margin:0 auto;

12 }

13 th,td{

14 border:1px solid #1e90ff;

15 padding:5px;

16 }

17

18

19

20

21

22

23 名称

24

控件

25

说明

26

27

28

Email类型

29

30

31

32

要求用户输入Email类型数据,提交表单时会自动验证

33

34

35

Search类型

36

37

38

39

搜索文本框，与text类型输入框相似，但是可以快速删除输入的搜索关键字

40

41

42

URL类型

43

44

45

46

对用户输入的数据进行URL检测，如果不符合规范就给出提示，阻止表单提交

47

48

49

tel类型

50

51

52

53

只对移动终端有效，会显示拨号键盘，通过该键盘接收用户录入的数据

54

55

56

数字类型

57

58

59

60

只能接受数字，min表示接受数字的下线，max同，step表示步长

61

62

63

范围类型

64

65

66

67

提供一个滑块工具以便取得指定范围内的数值

68

69

70

颜色类型

71

72

73

74

弹出一个调色板

75

76

77

日期类型

78

79

80

81

弹出日历框，用户选择一天的时间

82

83

84

周类型

85

86

87

88

弹出日历框,用户选择一个星期的时间

89

90

91

月类型

92

93

94

95

弹出日历框,用户选择一个月的时间

96

97

98

日期与时间类型

99

100

101

102

通过箭头选取时间(Safari支持的比较好)

103

104

105

本地日期与时间类型

106

107

108

109

弹出日历框,允许用户选择年月日，通过按钮选取时间

110

111

112

Placeholder

113

114

115

116

placeholder属性，默认显示一段提示文字在表单元素上

117

118

119

Required

120

121

122

123

required属性要求当前元素必须录入值，否则表单不允许提交

124

125

126

Multiple

127

128

129

130

允许用户输入多段数据，但必须使用逗号进行分割

131

132

133

Autofocus

134

135

136

137

autofocus属性网页加载时，让此控件自动获取焦点

138

139

140

Pattern

141

142

143

144

pattern属性允许用户自定义正则表达式验证控件中的内容，不符合则不允许提交

145

146

147

148

149

150

151

152

153

154

155

156

157 functiontxtRange_change(){158 //document.form的name属性.表单内元素的name属性这样就可以定位到指定的表单中的元素(表单特有)

159 varvalue=document.frm.txtRange.value;160 console.log("RangeValue:"+value);161 }162 functiongetValue(){163 varvalue=document.frm.txtColor.value;164 console.log("ColorValue:"+value);165 }166

167

168

169