Java Web快速入门——第2讲

1、form
   只要是涉及向服务器提交信息，都应该使用form。
   基本语法结构：
   <form action="目标文件" method="get|post">
      各种表单元素
   </form>
   action属性决定的目标文件来对用户提交的信息进行处理。

2、常用的表单元素

   单行文本框：用于输入少量的信息。
   基本语法格式：
   <input type="text" name="名字" value="值">
   type="text"就说明这是单行文本框；
   name指出文本框的名字，最好不要用汉字，最好使用有意义的名字；
   value指出默认值，如果没有默认值，可以不要value属性，value属性经常在修改的时候使用。
   注意：如果有格式要求，要明确的告诉用户。

   密码框：用于输入密码。
   基本的语法格式：
   <input type="password" name="名字" value="值">
   注意：设置密码的时候，应该使用确认密码，应该有两个密码框。

   提交按钮：当点击它的时候，会把输入的信息提交给服务器。
   基本语法格式：
   <input type="submit" value="值">
   type应该为submit，value是显示在按钮上面的信息。

 
   复位按钮：当点击它的时候，会把各个表单元素的值恢复到默认值。
   基本语法格式：
   <input type="reset" value="值">
  

   普通按钮：也可以完成提交，还可以完成方法的调用。
   基本语法格式：
   <input type="button" value="值">

   单选按钮：通用用于在多个选项中选择一个。
   基本语法格式：
   <input type="radio" name="名字" value="值">
   这个表示一个单选按钮，并且仅仅是一个按钮。
   例，选择性别：
   <input type="radio" name="sex" value="1" checked>男
   <input type="radio" name="sex" value="0">女
   如果希望在多个选项中选择一个（有互斥性），必须让他们的名字一致。

   复选框：用于多选。
   基本的语法格式：
   <input type="checkbox" name="名字" value="值">
   显示给用户的信息与提交给服务器的信息没有关系。
   如果希望多个选项是一组，应该使用相同的名字。

   下拉列表：用于选择，可以单选，也可以多选。
   基本语法格式：
   <select name="名字">
      <option value="1" selected>1</option>
      <option value="2">2</option>
      ...
   </select>
   每个选项使用一个option，使用value属性指出该选项的值，在<option>和</option>之间是显示给用户的值。

   文本域：用于输入大量的信息。
   基本语法格式：
   <textarea name="名字" cols="列数" rows="行数">
     默认值
   </textarea>
   要为这个文本域赋默认值，需要把值放在开始标志和结束标志之间，而不是使用value属性。

3、完成输入的时候应该注意的问题
   对格式的要求必须明确，包括长度、数字、日期、email、电话、必添。
   能够从系统中获取的信息不要让用户提供，例如当前时间。
   能够选择的信息不要让用户输入。
   按照信息的重要程度安排表单元素在界面中的位置。

4、对用户输入信息进行验证
   要用JavaScript，使用下面的标记：
   <script language="javascript">
      //JavaScript代码
   </script>

   要写方法
   function check(){
   }
   方法可以不用定义返回值，但是可以有返回值

   获取用户输入的值：
   document.form1.username.value
   document表示当前文档，form1表示表单的名字，username表示该表单中表单元素的名字，value表示得到值

   把表单提交与方法关联：可以使用表单的onSubmit事件。
   onSubmit="return check();"

   例：

<script language="javascript">
   function check(){
      username = document.form1.username.value;
      if(username.length<6 || username.length>8){
         alert("用户名长度不合适！");
         return false;
      }else{
         return true;
      }
   }
</script>

 

   使用button的onClick事件进行验证：
   首先要把提交按钮修改成普通按钮；
   在普通按钮上增加事件：onClick="javascript:check()"
   在验证成功的时候，提交表单：document.form1.submit();