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="登录" οnclick="login();"/>
图像按钮 <input type="image" src="#" alt="你好" value="提交" οnclick="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" οnclick="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服务器之间进行交互
表单的作用:实现浏览器与服务器之间数据交互
<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="登录" οnclick="login();"/>
图像按钮 <input type="image" src="#" alt="你好" value="提交" οnclick="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" οnclick="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属性设置