<form>标签是块级元素。
form标签的标准属性有id,class,style,title,lang,xml:lang.
表单能够包含input元素(包含button,checkbox,file,hidden,image,password,radio,reset,submit,text)、menu、textarea、fieldset、legend和label元素。
..............................................................................................................................
<input>标签用于搜集用户信息。根据不同的type类型,输入字段拥有多种形式。行内元素。
..............................................................................................................................
<input type="text" />定义单行输入字段,默认宽度20个字符(size属性)
1 <form> 2 your name: 3 <input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20" /><br> 4 <input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改" /> 5 </form>
..............................................................................................................................
<input type="password" />定义密码字段。密码字段中的字符会被掩码
参数与type="text"相类似,有type,name,value,maxlength,size,disabled,readonly属性。
1 <form> 2 your password: 3 <input type="password" name="yourpwd" size="20" maxlength="15" value="123456" />密码长度小于15 4 </form>
特殊属性disabled与readonly与text的一样。
..............................................................................................................................
<input type="submit" />定义提交按钮。提交按钮用来向服务器发送表单数据。数据会发送到表单的action属性中指定的页面。
<input type="reset" />定义重置按钮。重置所有内容
属性有type,value,name,size,一般值需要使用type与value属性
value属性表示按钮上显示的文本。
1 <form> 2 your name 3 <input type="text" value="your name" maxlength="30" size="50" onclick="this.value=''" /><br /> 4 <input type="submit" value="提交" /> 5   6 <input type="reset" value="重置" /> 7 </form>
..............................................................................................................................
<input type="button" />定义可点击的按钮,但没有任何的行为。常用于在用户点击按钮时启动JavaScript程序。
标准的window风格按钮,要实现跳转需要写入JavaScript代码。
value属性为按钮上显示的文本
name属性用于客户端JavaScript对数据操作。
1 <form> 2 your button: 3 <input type="button" value="Yes" name="youinfo" onclick="window.open('http://www.baidu.com')" /> 4 </form>
..............................................................................................................................
<input type="hidden" />定义隐藏字段,隐藏字段对用户是不可见的。隐藏字段通常会储存一个默认值,他们的值可以通过JavaScript进行修改
非常需要注意的一个,使用范围很广。通常成为隐藏域:如果有一个非常重要的信息需要提交到下一页,但有无法明示的时候使用。
hidden中value的值最有用。name用来引于JavaScript引用。
1 <form name="form1"> 2 your hidden info here: 3 <input type="hidden" name="yourhiddeninfo" value="baidu.com" /> 4 </form> 5 <script> 6 alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value) 7 </script>
alert出:隐藏域的值是baidu.com
..............................................................................................................................
<input type="checkbox" />定义复选框。允许用户在一定数目中选择一个或多个
属性有name,value,及特定属性checked(必须的)
最重要的是value值,提交到页面的是value值。name值可以不一样,但推荐使用一样的。
多条input语句组成多选框。
1 <form name="form1"> 2 a:<input type="checkbox" name="checkit" value="a" checked /><br> 3 b:<input type="checkbox" name="checkit" value="b" /><br> 4 c:<input type="checkbox" name="checkit" value="c" /><br> 5 </form>
..............................................................................................................................
<input type="radio" />定义单选按钮
属性有name,value,checked.
name属性必须一样,否则不能多选一。提交到处理页的还是value的值。
1 <form name="form1"> 2 a:<input type="radio" name="checkit" value="a" checked /><br> 3 b:<input type="radio" name="checkit" value="b" /><br> 4 c:<input type="radio" name="checkit" value="c" /><br> 5 </form>
..............................................................................................................................
<input type="image" />定义图像形式的提交按钮。点击图像就会提交表单数据。
属性有,src,alt,align.
src属性图像地址
align属性图像位置,建议使用css控制。
alt,图像替代文本.图像不显示时,依然可以提交。
1 <form name="form1" action="xxx.asp"> 2 your Imgsubmit: 3 <input type="image" src="../blog/images/face4.gif" /> 4 </form>
..............................................................................................................................
<input type="file" />定义用于上传文件
1 <form action="re.php" mathod="post" enctype="multpart/form-data"> 2 your file: 3 <input type="file" name="yourfile" size="30" /> 4 </form>
..............................................................................................................................
<select></select> <option></option>
<select>标签用于创建下拉菜单。有disabled,multiple,size,name属性。select标签可以不使用任何属性。
name属性规定select元素的名称。name属性用于对提交到服务器后的表单数据进行标识,或者用于JavaScript对表单引用。
disabled属性表示禁用该下拉菜单。
multiple属性表示可以选择下拉菜单的多个选项。windows系统通过ctrl,mac通过command来实现。此时默认默认浏览器会显示4个选项。
size属性表示显示的下拉菜单可见选项的个数,默认为1。(设为2的时候,谷歌浏览器会显示4,why??)
<option>标签定义下拉菜单中的一个选项。浏览器将<option>作为<select>标签的菜单或是滚动列表中的一个元素显示。option元素位于select元素内部,与select元素配合使用,否则该标签没有意义。
option标签可以不使用任何属性,但是一般会使用value属性,此属性的值为提交到处理页的内容。如果不设置value的值,提交<option></option>之间的内容,之间的内容为显示在浏览器上的内容
disabled属性表示禁用的option选项。其余的option选项还是可以正常使用。
selected属性,定义默认显示的选项。
1 <select > 2 <option value="河南省">河南省</option> 3 <option value="河北省">河北省</option> 4 <option value="河北省" checked>广东省</option> 5 <option value="河北省" disabled>广西省</option> 6 </select>
..............................................................................................................................
<textarea></textarea>
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。
属性有cols,rows,disabled,name,readonly
cols规定文本的可见宽度。
rows规定文本的可见高度。
diabled禁用该文本。
name用于表单时提交到服务器的标识,也可以用于客户端JavaScript的引用标识。
readonly表示只读,不能被修改。
..............................................................................................................................
<label></label>
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签属性只有一个for 属性,该属性必须要与相关元素的 id 属性相同。
1 <form> 2 <label for="male">Male</label> 3 <input type="radio" name="sex" id="male" value="1" /> 4 <br /> 5 <label for="female">Female</label> 6 <input type="radio" name="sex" id="female" value="0" /> 7 </form>
单选按钮显示的是label中的Male,鼠标点击Male时即可选中。input标签中需要设置id属性。
..............................................................................................................................