JavaScript动态网页设计 课件 8-2 表单常用元素

项目8.2表单常用元素主讲：***2024年1月2日JavaScript动态网页设计1子项目表单常用元素2024年1月2日JavaScript动态网页设计2学习任务

任务1表单标记与元素

任务2表单的操作

任务3文本框任务4单选按纽任务5多选按纽2024年1月2日JavaScript动态网页设计3任务1表单标记与元素表单就是一个容器，在这个容器中，有窗体和控件。表单是一个交互式窗口，是用户与页面接触最多的一个页面元素。表单可以收集用户的信息和反馈的意见，是网站管理员与浏览者之间沟通的桥梁。在使用中，表单常常用于实现用户注册、登录、投票等功能。表单常用元素2024年1月2日JavaScript动态网页设计4一、表单标记与元素1、表单的标记格式<form[属性]…>…</form>属性：2024年1月2日JavaScript动态网页设计52、表单的属性表单有很多属性，一般常用属性如下：（1） id：用于返回表单对象的id。可以通过id属性的值对表单进行引用。（2） name：用于返回表单对象的名称。可以通name属性的值对表单进行引用。（3） method：用于说明表单的提交方式。可取值get（默认值）或post。（4） action：用来定义表单处理程序的位置。（5） target：用于说明在何处打开表单。（6） submit()：将表单数据提交给服务器程序处理。（7） reset()：将表单中所有元素值重新设置为缺省状态。下面使用一个程序来说明表单的一些基本元素和相关标记。2024年1月2日JavaScript动态网页设计63、表单的元素通用的表单的元素有以下几种类型：（1）文本框：类型属性type="text"。（2）按纽：类型属性type="button"按纽，type="submit"提交，type="reset"重置，type="image"图像。（3）单选按纽：类型属性type="radio"。（4）复选按纽：类型属性type="checkbox"。（5）下拉菜单：标记<select></select>。2024年1月2日JavaScript动态网页设计74、表单元素的公共属性在表单中有较多的元素，但大多数元素都有相同的属性和相同的方法，称为公共属性和公共方法。常用的公共属性：

id：元素的唯一ID值。

name：元素的名称。

type：元素的类型。

value：元素的值。

checked：一个单选按纽或者复选按纽是否被选中，选中状态该属性值为true。如果单选按纽多个时，属性name都相同，只能有一个被选中。2024年1月2日JavaScript动态网页设计85、表单元素的公共方法

blur：将焦点从该表单元素上移开，其作用与focus()方法相反。

focus：将焦点移动到该表单元素上，其作用与blur()方法相反。

click：相当于鼠标在表单元素上单击。

select：选中表单元素中可编辑的文本，如文本框。如要实现在浏览器中打开页面后，光标自动聚焦在表单form1中name为user的元素上，可以使用代码document.form1.user.focus()。范例8-9：表单标记和元素2024年1月2日JavaScript动态网页设计9二、表单的样式用CSS可以定义表单元素的外观，下面只介绍表单元素的字样样式、边框样式和背景颜色，从而达到一定的美化表单的效果。范例8-10：设置表单的CSS样式返回2024年1月2日JavaScript动态网页设计10任务2表单元素的操作表单元素的操作最常见是对表单元素属性的访问等。1、表单元素的对象var[元素对象]=document.getElementById("[元素id]");对表单元素的操作首先要声明元素对象，再通过元素对象访问元素，获得元素属性值。通常采用DOM中定位元素的方法来声明元素对象，有三种方式都可以声明一个元素的对象。（1） 通过元素ID声明元素对象格式：例如：name是元素的ID。varuser=document.getElementById(“name”);//user为声明的元素对象。2024年1月2日JavaScript动态网页设计11（2）用forms集合声明元素对象var[表单对象]=document.forms["[表单id]"];var[元素对象]=[表单对象].elements["[元素id]"];例如：form1为表单ID。varform=document.forms["form1"];varuser=form.elements["name"];格式：2024年1月2日JavaScript动态网页设计12表格（3）直接声明元素对象var[元素对象]=document.[表单id].[元素id];例如：form1为表单ID，name为元素ID。varuser=;以上三种方法中，使用较为广泛的还是第1种方法。格式：2024年1月2日JavaScript动态网页设计132、表单元素的访问<inputtype="button"value="数据处理"onclick="[函数名]()"/>例如：<inputtype="button"value="数据处理"onclick="click()"/>

当按纽被点击后，将调用click()函数执行。

表单主要用于采集用户信息，在采集到用户信息后，通常都是需要把数据信息传递给一个数据处理函数。可以通过button按纽调用数据处理函数。

用按纽调用函数的方法：2024年1月2日JavaScript动态网页设计14btn=document.getElementById("[按纽ID]");Strings=btn.value;按纽的value属性值赋值给了s变量。在数据函数中，可以通过表单元素对象，访问元素属性值。例如要访问一个按纽的标题，访问格式如下：范例8-11：按纽元素的操作。2024年1月2日JavaScript动态网页设计15任务3文本框文本框是表单中使用广泛的一种对象，它的用途是让使用者自己输入内容，再由系统获取和处理。文本框分为单行文本框、多行文本框和密码框。1、 单行文本框<inputtype="text"id="textid1"class="txt"maxlength="最大长度"/>单行文本框的type属性为text，语法格式：maxlength属性是控制用户输入的字符个数。例如：输入用户名<div><span>用户名：</span><br/><inputtype="text"id="textid1"class="txt"maxlength="12"/>2024年1月2日JavaScript动态网页设计162、 多行文本框<textareaid="taid1"name="message"rows="行数"maxlength="最长字符数"onkeypress="returncontrlString(this);"></textarea>多行文本框使用标签<textarea></textarea>，语法格式：多文本框没有一行限制多少个字符，只有总的字符数的限制。设置了onkeypress事件，其值为contrlString()函数的返回值。即键盘按键被按下并释放一个键时会返回contrlString()函数的返回值。contrlString()函数代码如下：functioncontrlString(ta){returnta.value.length<ta.getAttrbute("maxlength");}该方法返回当前textarea中字符的个数与自定义的字符个数的比较结果，如果小于自定义的字符个数则返回true，否则返回false，使用户不能再输入字符。2024年1月2日JavaScript动态网页设计17范例8-12：单行和多行文本框应用<inputtype="password"id="pwd"class="txt"maxlength="最大长度"/>3、 密码框密码框的type属性为password，语法格式：maxlength属性是控制用户输入的字符个数。例如：输入登录信息范例8-13：单行和多行文本框应用返回2024年1月2日JavaScript动态网页设计18任务4单选按纽单选按纽主要用于在表单中进行单项的选择，在单选按纽使用时，通常是多个同时使用，但要求属性name的值相同。1、单选按纽的标签<inputtype="radio"…/>单选按纽的type属性为radio。标签格式：2024年1月2日JavaScript动态网页设计192、常用属性常用属性如下：（1）type：组件类型，属性值为radio。（2）id：组件的ID。（3）name：组件的名称。（4）value：值。（5）checked：用于设置或者返回单选按纽的状态，为布尔类型，值为true或false。在一组相同name属性中，只能有一个的checked值设置为true。2024年1月2日JavaScript动态网页设计20例如：<p><inputtype="radio"id="rid1"name="rn"value="红色"checked="false"/><labelfor="rid1">红色</label></p><p><inputtype="radio"id="rid2"name="rn"value="绿色"checked="true"/><labelfor="rid2">绿色</label></p>显示结果：2024年1月2日JavaScript动态网页设计213、查看选择的结果varrad=document.form1.radname;for(vari=0;i<rad.length;i++){ if(rad[i].checked){ s=rad[i].value; alert(s); }}定义了rad，是表单form1的name属性（radname）的对象。范例8-14：查看选择的颜色。在一组单选按纽中，最后有一个是被选中的，我们怎样识别出被选中的项？怎样查看选择的结果？查看结果方法：返回2024年1月2日JavaScript动态网页设计22任务5复选框复选框与单选按纽一样，也是用于在表单中进行选择项目，但在复选框使用时，通常是多个复选框一组使用，其属性name的值都相同。复选框与单选按纽的区别是，复选框可以选择多项，而单选按纽只能选择一项。1、复选框的标签<inputtype="checkbox"…/>标签格式：复选框的type属性为checkbox。2024年1月2日JavaScript动态网页设计232、常用属性常用属性如下：（1）type：组件类型，属性值为checkbox。（2）id：组件的ID。（3）name：组件的名称。（4）value：值。（5）checked：用于设置或者返回复选框的状态，为布尔类型，值为true或false。在一组相同name属性中，可以有多个checked属性值为true。2024年1月2日JavaScript动态网页设计24例如：<p><inputtype="checkbox"id="cid1"name="cn"value="红色"/><labelfor="cid1">红色</label></p><p><inputtype="checkbox"id="cid2"name="cn"value="绿色"checked="true"/><labelfor="cid2">绿色</label></p>显示结果：2024年1月2日JavaScript动态网页设计253、查看选择的结果functiongetResult(){vari,j,check;varCheckBox=;//定义表单对象document.