HTML 表单

HTML 表单

表单在网页中应用比较广泛，如申请电子邮箱，用户需要首先填写注册信息，然后才能提交申请。又如希望登录邮箱收发电子邮件，也必须在登录页面中输入用户名、密码才能进入邮箱，这就是典型的表单应用。
通俗的讲，表单就是一个将用户信息组织起来的一个容器。将需要用户填写的内容放置在表单容器中，当用户单击"提交"按钮时，表单会将数据统一发送给服务器。
在HTML5中，使用<form>标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签。
例：
     <form>
         <!--表单元素-->
     </form>
一、form标签的属性
   action：语法为action="URL",如果action属性的值为空，则默认表单提交到本页。
   method：此属性告诉浏览器如何将数据发送给服务器，它指向服务器发送数据的方法。语法为：medthod=(get | post)
      二者区别：
       （1）post方法提交方式不会改变地址栏状态，表单数据不会被显示。
       （2）使用get方法提交方式，地址栏状态会发生变化，表单数据会在URL信息中显示。
   target：规定 action 属性中地址的目标（默认：_self）L。
   enctype：规定被提交数据的编码（默认：url-encoded）。
   novalidate：规定在提交表单时不应该验证 form 或 input 域。
二、input属性常用的属性
   type：指定表单元素类型。
   name：指定表单元素的名称。
   value：此属性是可选属性，指定表单元素的初始值。
   size：指定表单元素的初始宽度。
   maxlength：指定可在text或password元素中输入的最大字符数。
   checked：指定按钮是否被选中。
   disabled：规定输入字段是禁用的。被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交。
   autocomplete ：规定表单或输入字段是否应该自动完成。
   autofocus：是布尔属性。如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。
   formnovalidate ：novalidate 属性是布尔属性。如果设置，则规定在提交表单时不对 <input> 元素进行验证。
 三、表单元素
   1、单行文本框
     <input type="text"/>
   2、密码框
     <input type="password"/>  
   3、单选按钮框
     <input type="radio"/>  
   4、复选框
     <input type="checkbox"/>  
   5、列表框
     <select name="指定的列表名称" size="行数">
         <option value="可选项的值"></option> 
         <option value="可选项的值"></option>
     </select>
   6、按钮
      1、重置按钮
         <input type="reset"/>    
      2、提交按钮
         <input type="submit"/>   
      3、普通按钮
         <input type="button"/>
      4、图像按钮
         <input type="image"/>         
    7、多行文本域
       <textarea name="textarea" cols="显示的列数" rows="显示的行数">
             文本内容
       </textarea>
    8、文件域
       <input type="file"/>             
    9、邮箱
       <input type="email"/>  
       会自动验证email地址格式是否正确 
    10、网址
       <input type="url"/>   
       会自动验证URL地址格式是否正确
    11、数字
       <<input type="number"/>   
    12、滑块
       <input type="range"/>   
    13、搜索框
       <input type="search"/>   
    14、隐藏域
       <input type="hidden" value="值"/>
       value必须有值，因为hidden隐藏的是value的值
    15、只读、禁用
       readonly：只读属性
       disabled：禁用属性
    16、表单元素的标注
       <label for="id">
           标注的文本
   </label>