第03章_jsp中的表格和表单讲稿.pptVIP

WEB网站架构第3章 JSP中的表格和表单 袁德明 2010年8月 提纲 table:表格的语法 form:表单的语法 常用的表单元素 完成输入时应该注意的问题 对用户输入信息进行验证 1 table:表格的语法 开始标志：table? 结束标志：/table 中间是行，每行是一个tr? /tr 每行之间是列，每一列对应td /td td/td之间的内容就是每个表格中的信息 例如: table tr tdA /td tdB /td tdC /td /tr /table 2 form:表单的语法 只要是涉及向服务器提交信息，都应该使用form。 基本语法结构： form action=目标文件 method=get|post ????? 各种表单元素 /form action属性决定的目标文件来对用户提交的信息进行处理。 3 常用的表单元素3.1 单行文本框 单行文本框：用于输入少量的信息。 基本语法格式： input type=text name=名字 value=值 type=text说明这是单行文本框； name指出文本框的名字，最好不要用汉字，最好使用有意义的名字； value指出默认值，如果没有默认值，可以不要value属性，value属性经常在修改的时候使用。 注意：如果有格式要求，要明确的告诉用户。 3.2密码框 密码框：用于输入密码。 基本的语法格式： input type=password name=名字 value=值 注意：设置密码的时候，应该使用确认密码，应该有两个密码框。 3.3提交按钮 提交按钮：当点击它的时候，会把输入的信息提交给服务器。 基本语法格式： input type=submit value=值 type应该为submit，value是显示在按钮上面的信息。 3.4复位按钮 复位按钮：当点击它的时候，会把各个表单元素的值恢复到默认值。 基本语法格式： input type=reset value=值 3.6单选按钮 单选按钮：通用用于在多个选项中选择一个。 基本语法格式： input type=radio name=名字 value=值 这个表示一个单选按钮，并且仅仅是一个按钮。 例如: input type=radio name=sex value=1 checked男 input type=“radio” name=“sex” value=“0”女 如果希望在多个选项中选择一个（有互斥性），必须让他们的名字一致。 3.7复选框 复选框：用于多选。 基本的语法格式： input type=checkbox name=名字 value=值 显示给用户的信息与提交给服务器的信息无关。 如果希望多个选项是一组，应该使用相同的名字。 3.8下拉列表 下拉列表：用于选择，可以单选，也可以多选。 基本语法格式： select name=名字 option value=1 selected1/option option value=22/option ... /select 每个选项使用一个option，使用value属性指出该选项的值，在option和/option之间是显示给用户的值。 3.9文本域 文本域：用于输入大量的信息。 基本语法格式： textarea name=名字 cols=列数 rows=行数 默认值 /textarea 要为这个文本域赋默认值，需要把值放在开始标志和结束标志之间，而不是使用value属性。 4 完成输入时应该注意的问题 对格式的要求必须明确，包括长度、数字、日期、email、电话、必添。 能够从系统中获取的信息不要让用户提供，例如当前时间。 能够选择的信息不要让用户输入。 按照信息的重要程度安排表单元素在界面中的位置。 5对用户输入信息进行验证 5.1 使用JavaScript编程 使用下面的标记 script language=javascript //JavaScript代码 /script 5.2 编写方法 方法 function check() { } 方法可以不用定义返回值，但是可以有返回值 5.3获取用户输入的值 语法 document.form1.username.value 说明 document表示当前文档， form1表示表单的名字， username表示该表单中表单元素的名字， value表示得到值 5.4 把表单提交与方法关联 常用表单事件—onSubmit