前端页面积累------form表单

 服务器都需要跟用户的浏览器打交道，如表单提交。

表单提交到服务器一般都使用GET/POST请求

 

 

 

 

 

 

 

 

 

1.label标签

不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。

<label>标签-----for效果

就是当你的鼠标的指针指到lable标签时，对应的id就会获得焦点

语法：<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同

<form>
<label for="hello">hello</label><input type="radio" name="sex" id="hello" /><br />
<label for="world">world</label><input type="radio" name="sex" id="world" />
</form> 

 

2.验证表单后提交表单;onsubmit 属性只在 <form> 中使用，在提交表单时触发

<script type="text/javascript">
         function check(form) {
         //也可以这样获取名字：document.getElementById("txtname").value
          if(form.userId.value=='') {
                alert("请输入用户帐号!");
                form.userId.focus();
                return false;
           }
       if(form.password.value==''){
                alert("请输入登录密码!");
                form.password.focus();
                return false;
         }
         return true;
         }
</script>
<form action="login.do?act=login" method="post" onsubmit="return check(this)">
用户帐号
  <input type=text name="userId" size="18"></br>
 登录密码      
<input type="password" name="password" size="18"/></br>      
 <input type=submit name="submit1" value="登录"> 
</form>  

 

 

 

3.设置将表单内的数据发送到服务器所使用的方法，POST,在HTTP请求中嵌入表彰数据，此种方法在发送数据的数据量上没有强加限制，也是现在普遍使用的方法

应用场景：主要用于向服务器传输数据；如常见的登录、注册页面

 

属性：

①action {URL}：一个URL地址；指定form表单向何处发送数据

②enctype {string}：规定在发送表单数据之前，如何对表单数据进行编码

（指定的值有：application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）；

multipart/form-data ：不对字符编码。使用包含文件上传控件的表单时，必须使用该值）

③method {get/post}：指定表单以何种方式发送到指定的页面

 

提交方式：

①GET：form表单里所填的值，附加在action指定的URL后面，做为URL链接而传递

点击提交后，URL变为：

http://localhost:4778/login.html?login_username=admin&login_pswd=123456

变量提交的样式为：html元素的name属性=提交的值。多个变量，以 & 符号隔开。

②POST：form表单里所填的值，附加在HTML Headers上

 

【区别】

①数据的查询：get方式，能一目了然的看到所要查询的信息。post因为隐藏掉了这些信息，不方便进行检验查询条件。

②敏感数据的提交(安全性)：更改、添加操作时，比如注册用户、更改用户资料或者登录用户等。get 方式附加在URL上，会泄露掉敏感的消息。post方式，能隐藏掉敏感的信息。

③大数据文本传递：建议用post方法。get虽然方便查询，但由于是附加在URL上，各浏览器对URL也有个长度限制-->IE：2048字符。Chrome、FF 为8182字符。post 没有此限制

 

 

4.

 

 

 

5.表单服务器验证一般是用 ajax

 

 

6.