表单都应该提交点什么

一.表单的使用

   总结一下今天学习的内容:

     表单标签对form

  input元素

   input标签根据不同的type="属性":

   属性包括:

          

text: 文本输入框
password:密码框
checkbox:复选框
radio:单选框,当两个单选框的name不同时就可以多选
file:上传文件控件
submit：提交按钮
reset:重置按钮
textarea:文本框

select&option：下拉菜单

下面是参数:
   selected:默认项
   disable：禁止选择
   checked:选中操作
   size:在下拉菜单的个数
   multiple：多选
   placeholder：文本输入框的提示语

 辅助表单:
    

 

以下是拓展和具体用法的实例:

 

 

 

表单的使用

标签创建

  

文本:text

    
"http://www.baidu">
            First name:"text" name="firstname"/>

            last name :"text" name="lastname">
        

 

 

 

密码:password

"http://www.baidu">
            姓名:"text" name="firstname"/>

            密码:"password" name="pwd">
        

 

 

单选按钮:radio

        
"http://www.baidu">
            "radio" name="sex" value="male" />male
  
            "radio" name="sex" value="female">Female
        

 

 

 

复选框checkbox

 

        
"">
  "checkbox" name="vehicle" value="Bike">I have a bike

  "checkbox" name="vehicle" value="Car">I have a car 

 

 

 

 

提交按钮:submit

重置按钮:reset

"">
   姓名:"text" name="name"/>

   密码:"password" name="pwd">

   "submit" value="提交" />
   "reset" value="重置">
  

选择文件:file

"">
   "file" name="file" value="上传文件" />

 

 

 

下拉列表:select&option

  

"">
    <select>
        "A">北京   
        "B">广东
    select>

 

 

 文本域:textarea

"">
    "</span><span style="color: #800000;">10</span><span style="color: #800000;">"</span> cols=<span style="color: #800000;">"</span><span style="color: #800000;">30</span><span style="color: #800000;">"</span> placeholder=<span style="color: #800000;">"</span><span style="color: #800000;">请输入内容:</span><span style="color: #800000;">"</span>>
        
    

 

 

 

创建按钮:button

   

"">
   "button" name="button" value="hello world"/>

 

 

 

选择颜色:color

"color" name="color" value="颜色"/>

可以点击选择颜色

 

 

 

 

日期选框:date

"date" value="calendar" name="date" />

 

 

 

生日(日期和时间):datetime（带有时区）

"">
   
  生日(日期和时间)"datetime" name="datetime" datetime />

 

 

 

不带时区的(时间和日期)：datetime-local

"">
   
  生日(日期和时间)"datetime-local" name="datetime" datetime />

 

 

 

 

 

 电子邮件:email

"">
   
  E-mail: "email" name="usremail">

 

 

 

 

定义图像作为提交按钮：image

"image" src="img_submit.gif" alt="Submit">

 

将点击的坐标发送给服务器

 

 

 

定义 month 和 year 控件（不带时区）：month

生日 ( 月和年 ): "month" name="bdaymonth">

 

 

 

 

义用于输入数字的字段（您可以设置可接受数字的限制）：number

数量 ( 1 到 5 之间): "number" name="quantity" min="1" max="5">

 

 

 

 

定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制：range

"range" name="points" min="1" max="10" step="5">

 

 

 

定义搜索字段（比如站内搜索或谷歌搜索等）：search

 

Search Google: "search" name="googlesearch">

 

 

 

 

 

 

 

 

定义用于输入电话号码的字段：tel

"">
   
电话号码: "tel" name="usrtel">

 

 

定义用于输入时间的控件（不带时区）：time

选择时间: "time" name="usr_time">

 

 

定义用于输入 URL 的字段：url

 

"">
   
添加你的主页: "url" name="homepage">

 

 

 

 

定义 week 和 year 控件（不带时区）：week

 

 

"">
   
选择周: "week" name="week_year">

 

 

 

 最后还有一个带有边框的标题:

   

　　

   　　 
这是QQ
　　

 

表单实例:

 

 

 1 
 2 
 3 
 4     
 5      
43     
44 
45   
46      
class="container">
47        

48            电子邮箱:"email" name="email" class="content"/>

49            设置密码:"password" name="pwd" class="content"/>

50            真实姓名:"text" name="true_name" class="content"/>

51            
52                 
53                性别: "radio" name="sex">男
54                 "radio"  name="sex">女
55            
    
56                 
57            生日:<select>
58                请选择
59            select>年
60           <select>
61               ---
62           select>月
63           <select>
64                         ---
65           select>日

66                       &nbsp;
67           "color: blue;font-size:12px;margin: 10px 0px;" >为什么要填写我的生日？

68           "line-height: 57px;position: relative;">
69                &nbsp;
70           我现在:<select>
71                 请选择身份
72           select>"font-size: 11px;">(非常重要)
73           

74          ""> "display:block;font-size: 12px;text-align: center;">看不清楚换一张?
75          "line-height: 60px;">验证码:"text" name="txt" style="width: 117px;height: 27px; line-height: 40px;">
76          
class="bord">
77              立即注册
78          
79          
class="triangle">
80         
81      
82 
83 
84 

View Code

 

 

 

 

二.表单制作QQ登陆

 

 

 

上代码:

  1 
  2 
  3     
  4         "UTF-8">
  5         
  6         
 84         
 85     
 86     
 87          "Media/1.png">
 88          
class="container">
 89              
class="top">
 90                  
 91              
 92              
class="down">
 93                  
class="content">
 94                      
"">
 95                          "text" name="zhanghao" id="input_text"/>
 96                          "password" name="pwd" id="input_pwd"/>
 97                          "checkbox" name="register"/>class="font">自动登陆
 98                          "checkbox" name="remember"/>class="font">记住密码
 99                          "" class="font-a">找回密码
100                      
101                      "submit" name="submit" value="安全登陆" id="submit-bt"/>
102                  
103               
104              class="photo_head">"Media/earth.png" alt="头像" style="width: 70px;height: 70px; border-radius: 50%;">
105          
106     
107 

View Code