html篇之《表单》

一  
    
    
、结构

<form action="url" method="post" name=""> <label>标注</label><input type="text" /> <select name=""> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </select> <select name=""> <optgroup label="分组1"> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </optgroup> <optgroup label="分组2"> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </optgroup> </select> <textarea name="" cols="30" rows="10">多行文本域</textarea> </form>

二

     


     


    、标签属性

1. <form name="表单标签"></form>标签

(1) 属性 ① action

值为url 提交表单时  
    
    
，后台服务器接收表单数据的后台URL地址 ② method

前台发送数据到后台服务器的方式

     


     


    ，值为： get 前台使用action的URL来包含参数向后台传递数据 此方式发送信息的数量有限制 一般用于从后台获取非隐秘信息 post 前台把表单数据作为http请求体的一部分向后台传递隐秘数据 此方式发送信息的数量没有限制 一般用于从后台获取隐秘信息和修改服务器上的数据 ③ name

表单的名称 ④ target

规定在何处打开action URL 




 




 


，值为： _self _blank _top _parent ⑤ enctype

规定前台在向服务器发送数据之前  

   

   

，对数据进行编码的方式

     

     

   ，一般用于method="post"的情况 值为： application/x-www-form-urlencoded multipart/form-data text/plain

2. <input name="表单输入标签"/>标签

(1) type属性  




  




  

，值为： ① text

单行文本域

此模式下  


  


  


，相应属性： name = "单行文本域的名称" maxlength = "文本框内可输入的最大字符长度" size = "文本框的宽度
     
     
  ，以字符个数为单位
   




   




   
，默认20个字符" value = "文本框的默认值" placeholder = "文本框内浅字显示的提示文本" ② password

密码域

也是文本域 



 



 



，前台文本框密码被***替代            ，用于安全保护隐私 ③ file

文件域

上传文件 ④ radio

单选域 此模式下

    




    




    ，<input />相应属性： 此模式下














，同一组的name属性值一定要相同            ，给使用者做可识别标识(后台服务器)

value = "一般是选项的标识数据

     



     



     ，提供给使用者(后台服务器)" checked属性













，默认此项为初始选中项 ⑤ checkbox

复选域 此模式下  
    
    
，<input />相应属性： 此模式下

     


     


    ，同一组的name属性值建议相同 




 




 


，给使用者做可识别标识(后台服务器)

value = "一般是选项的标识数据  

   

   

，提供给使用者(后台服务器)" checked属性

     

     

   ，默认此项为初始选中项 ⑥ button

普通按钮

此模式下  




  




  

，相应属性： name = "按钮名称  


  


  


，给使用者做可识别标识(后台服务器)" value = "前台按钮上显示的文本" ⑦ submit

提交按钮

此模式下
     
     
  ，相应属性： name = "按钮名称
   




   




   
，给使用者做可识别标识(后台服务器)" value = "前台按钮上显示的文本" ⑧ image

图像域 



 



 



，图像提交按钮

此模式下            ，相应属性： name = "图像提交按钮名称

    




    




    ，给使用者做可识别标识(后台服务器)" src = "图片地址或链接" ⑨ reset

重置按钮

此模式下














，相应属性： name = "按钮名称            ，给使用者做可识别标识(后台服务器)" value = "前台按钮上显示的文本" ⑩ hidden

隐藏域 此模式下

     



     



     ，<input />相应属性： name = "名称













，给使用者做可识别标识(后台服务器)" value = "提供给使用者的数据(后台服务器)"

3. <select></select>标签

(1) 属性 ① name

name = "下拉菜单和列表的名称" ② multiple

可选择多个选项 ③ size

size = "列表中可见选项的数目" (2) 标签配搭使用 ① 基本选项标签 <select name=""> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </select> ② 分组下拉菜单 <select name=""> <optgroup label="分组1"> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </optgroup> <optgroup label="分组2"> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </optgroup> </select>

4. <option></option>标签

(1) 属性 ① selected

默认此项为初始选中项 ② value

value = "提供给使用者的数据(后台服务器)"

5. <textarea></textarea>标签

(1) 属性 ① name

name = "多行文本域的名称" ② placeholder

placeholder = 文本区的预期内容简短描述提示 ③ rows

rows = "文本区内的可见行数" ④ cols

cols = "文本区内的可见宽度"

我是弦歌  
    
    
，

一个渴望成长的前端小白

     


     


    ，

欢迎您的留言 




 




 


，

更期待您的不吝指正    
    
    。

若我的内容能帮助到您  

   

   

，欢迎关注我 ♥

记得点赞收藏哦 ♥