HTML表单元素详解-优快云博客

本文详细介绍了HTML表单中的各种元素及其属性，包括input、textarea、button等标签的使用方法和应用场景，为网页开发者提供了实用的参考资料。

2019独角兽企业重金招聘Python工程师标准>>>

01	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02	<html xmlns="http://www.w3.org/1999/xhtml">

03

   <head> 

04	<title>趴在树上的猪</title>

05	<base href="http://news.baidu.com/resource/img/">

06	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

07	<link rel="stylesheet" type="text/css" href="/index.css" />

08	<script type="text/javascript">

09	document.write("Hello World!")

10

     </script> 

11	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

12	<style type="text/css">

13	body{color:#333;}

14

     </style> 

15

   </head> 

16	<body class="html">

17	<input type="button" value="我是个按钮"/>

18	<input type="checkbox" value="我是个复选框" />

19	<input type="file" />

20	<input type="hidden" value="我是个隐藏的input"/>

21	<input type="password" value="我是个密码输入框"/>

22	<input type="radio" value="我是个单选框"/>

23	<input type="reset" value="我是个重置按钮"/>

24	<input type="submit" value="我是个提交按钮"/>

25	<input type="text" value="我是个文本输入框"/>

26	<textarea>

27

     文本域 

28	</textarea>

29	<button type="button" value="我只是个普通按钮" name="普通按钮">普通</button>

30	<button type="reset" value="我是个重置按钮" name="重置按钮"/>重置</button>

31	<button type="submit" value="我是个提交按钮" name="提交按钮"/>提交</button>

32	<select name="select">

33	<option>下拉选择框1</option>

34	<option>下拉选择框2</option>

35	<option>下拉选择框3</option>

36

       </select> 

37

       <br /> 

38	<label for="test1">label1</label><input type="radio" id="test1"name="test" />试试点击labe1

39

       <br /> 

40	<label for="test2">label2</label><input type="radio" id="test2"name="test"/>试试点击labe2

41

       <br /> 

42	<fieldset>

43	<legend>猪哥每日一贴</legend>

44	www.qaforcode.net: <input type="text" />

45	www.qaforcode.net2: <input type="text" />

46	</fieldset>

47

       <br /> 

48

   </body> 

49

 </html> 

表单相关标签

表单一般是由form包围的内容、 form的必须属性有action，用来指定表单提交的页面，可选属性有accept规定上传提交的文件的类型，accept-charset服务器处理表单数据接受的字符集。enctype 规定表单数据在发送到服务器之前应该如何编码method 规定如何发送表单数据（get|post）,name规定表单的名字，target规定在何处打开action url，标准属性id, class, title, style, dir, lang, xml:lang，事件属性：onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

1、<input>标签让用户输入信息的标签，根据属性type不同表现形式也不同。上例中已经列出了所有的样子。

属性	值	描述	DTD
accept	mime_type	规定通过文件上传来提交的文件的类型。	STF
align	left right top middle bottom	不赞成使用。规定图像输入的对齐方式。	TF
alt	text	定义图像输入的替代文本。	STF
checked	checked	规定此 input 元素首次加载时应当被选中。	STF
disabled	disabled	当 input 元素加载时禁用此元素。	STF
maxlength	number	规定输入字段中的字符的最大长度。	STF
name	field_name	定义 input 元素的名称。	STF
readonly	readonly	规定输入字段为只读。	STF
size	number_of_char	定义输入字段的宽度。	STF
src	URL	定义以提交按钮形式显示的图像的 URL。	STF
type	button 按钮 checkbox 复选框 file 文件选择框 hidden 隐藏输入框 image 图片按钮 password 密码输入框 radio 单选框需要name设置为一样的才能实现单选 reset 重置框 submit 提交按钮 text 文本输入框	规定 input 元素的类型。	STF
value	value	规定 input 元素的值。	STF

标准属性：id, class, title, style, dir, lang, xml:lang

事件属性：tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

2、<textarea>标签是多行输入标签，实质和input的text有点类似，只是他能多写几行罢了

必须属性：

属性	值	描述	DTD
cols	number	规定文本区内的可见宽度。	STF
rows	number	规定文本区内的可见行数。	STF

可选属性：

属性	值	描述	DTD
disabled	disabled	规定禁用该文本区。	STF
name	name_of_textarea	规定文本区的名称。	STF
readonly	readonly	规定文本区为只读。	STF

标准属性：id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

事件属性：onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

3、<button>标签和有三种类型button，reset，submit分别和input中的button，reset，submit相同实际使用中用input的形式就行了

4、下拉列表标签包括<select><optgroup><option>实际使用中一般只用到select 和 option如上例中，option必须和select配合使用，否则没有意义

其中select的可选属性

属性	值	描述	DTD
disabled	disabled	规定禁用该下拉列表。	STF
multiple	multiple	规定可选择多个选项。	STF
name	name	规定下拉列表的名称。	STF
size	number	规定下拉列表中可见选项的数目。	STF

标准属性：id, class, title, style, dir, lang, xml:lang, accesskey, tabindex

事件属性：onfocus, onblur, onchange

optgroup的必须属性

属性	值	描述	DTD
label	text	为选项组规定描述。	STF

可选属性：

属性	值	描述	DTD
disabled	disabled	规定禁用该选项组。	STF

标准属性：id, class, title, style, dir, lang, xml:lang

事件属性：tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

option的可选属性

属性	值	描述	DTD
disabled	disabled	规定此选项应在首次加载时被禁用。	STF
label	text	定义当使用 <optgroup> 时所使用的标注。	STF
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。	STF
value	text	定义送往服务器的选项值。	STF