HTML常用标签<二>

8.表单与表单元素
表单的作用：实现浏览器与服务器之间数据交互
<form action="url" method="get|post" name="form_login" enctype="application/x-www-form-urlencoded|multipart/form-data有文件域时，表单数据在传递之前浏览器对其编码的方式"></form>：创建表单，表示一组表单数据的容器

URL：get方式 http://localhost:8080/user/login.jsp?username=123&password=888

8.1表单元素


<input />标签可以创建文本框、密码框、单选按钮、复选框、文件域、隐藏域、提交按钮、重置按钮、自定义命令按钮、图像按钮等。

表单元素几个重要的属性：

 name:只有设置name的表单元素的名称的，才能参与表单提交

disabled:禁用表单元素，它使浏览者无法操作。被禁用的表单元素不参与表单提交

readonly:使表单元素的数据无法被浏览者更改

文本框 <input type="text" />

密码框 <input type="password" />

单选按钮<input type="radio" name="sex" value="man" />男<input type="radio" name="sex" value="woman" />

复选框 兴趣爱好：<input id="chkTravel" type="checkbox" name="chkHobies" value="travel" checked="checked" /> 旅行 
 <input id="chkGame" type="checkbox" name="chkHobies" value="game"  /> 游戏
 <input id="chkShopping" type="checkbox" name="chkHobies" value="shopping" checked="checked" /> 购物

文件域 相片：<input id="filePhoto" type="file" name="filePhoto" accept="设置文件域可接受的文件类型" />

隐藏域 <input id="hidUid" type="hidden" name="uid" value="2001" />

提交按钮 <input type="submit" value="注册" />

重置按钮 <input type="reset" value="重置" />

自定义按钮 <input type="button" name="登录" onclick="login();"/>

图像按钮 <input type="image" src="#" alt="你好" value="提交" onclick="login_check();" width="20px" height="20px"   />

<button></button>标签按钮
<button id="btn" name="btn_tijiao" type="button|submit|reset" value="表单提交时，此按钮要发送的数据。注意：此属性对IE浏览器无效，表单提交时IE浏览器会将标签之间的文本作为此按钮的数据发送给服务器" disabled="disabled" ></button>

多行文本域 
<textarea rows="4" cols="4" id="text" wrap="Off不自动换行。文本区只有一行文本，除非浏览者回车强制换行|virtual虚拟换行。一行文本的宽度即将超出多行文本框
宽度时自动换行，但在自动换行处不产生任何标志|physical物理换行。与虚拟换行相对，产生换行标志" >
nihao
</textarea>
<input type="button" onclick="login();">

获取多行文本域中的值
<script type="text/javascript">
function login(){
alert(document.getElementById("text").firstChild.nodeValue);
}

</script>

列表框
<select id="sltLesson" name="lesson"  size="3显示几条列表项" multiple="multiple设置列表框的选项可以多选" disabled="disabled禁用此列表框" >
<option value="0" selected="selected默认选中">----请选择---</option>
<option>语文</option>
<optgroup label="初中" >

<option value="1" >地理</option>
<option value="2">生物</option>
</optgroup>
</select>


<lable for="txtName"></lable> 标签：说明文字
for属性的值与元素的id相对应，功能是将此标签与该元素绑定在一起，这种绑定方式是显示绑定
<input id="redio_sex" type="radio" name="sex" value="man" /><lable for="redio_sex">男</lable>

隐式绑定
<lable>
<input id="redio_sex" type="radio" name="sex" value="man" />男
</lable>

<fieldset></fieldset><legend></legend>标签

fieldset标签用于将表单内的多个表单元素分成多个组，而legend标签则用于为每个组提供一个标题

 表单用于浏览器和WEB服务器之间进行交互

表单提交指浏览器将表单内部表单元素的数据发送到web服务器端。表单数据提交到哪个程序处理由表单的action属性设置，浏览器以哪种方式提交表单数据由表单的method属性设置