表单

1.表单就是一个将用户信息组织起来的容器.将需要用户填写的内容放置在表单容器中,当用户单击"提交"按钮的时候,表单会将数据统一发送给服务器.

表单的应用:

登陆、注册:登录时填写用户名、密码、注册时填写用户名、电话等个人信息

网上订单:在网上买东西,一般要求填写姓名,联系方式,付款方式等

调查问卷:回答对某个问题的看法,以便形成统计数据,方便分析

网上搜索:输入关键字,搜索想要的可用信息

为了方便用户操作,表单提供了多种表单元素

2.表单的内容:

创建表单后,在表单中放置控件一接受用户的输入,通常放在<form></form>中.不同的表单控件有不同的用途

3.表单标签及表单属性

属性	说明
action	此属性指示服务器上处理表单输出的程序.一般来说,当用户单击表单上的"提交"按钮后,信息发送到Web服务器上,有action属性所指定的程序处理.语法为action="URL".如果action属性的值为空,则默认表单提交到本页
method	此属性告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法,语法为method=(get|post)

<form method ="post" action ="result.html">
<p>名字:<input  name="name"  type="text"/></p>
<p>密码:<input  name="pass"  type="password"/></p>
<p>
   <input  type="submit" name="Button" value="提交"/>
   <input  type="reset" name="Reset" value="重填"/>
</p>
</form>

post提交方式和get提交方式的区别:

(1)post方法提交方式不会改变地址栏状态,表单数据不会被显示

(2)使用get方法提交方式,地址栏状态会发生改变,表单数据会在URL信息中显示

基于以上两点区别,post方法提交的数据安全性明显高于get方法提交的数据,尽可能用post方法来提交表单数据

3.1表单元素及其格式

在表单中使用<input>标签添加表单元素

<input>元素的常用属性

属性	说明
type	此属性指定表单元素的类型.可用的类型有text,password,checkbox,radio,submit,reset,file,email,number,url,hidden,image和button.默认为text
name	此属性指定表单元素的名称.例如,如果表单上有几个文本框,可以按名称来标识它们,如uername,phone等
value	此属性是可选属性,它指定表单元素的初始值.如果type为radio类型,则必须制定一个值
size	此属性指定表单元素的初始宽度,如果type为text或password类型,则表单得大小以字符为单位.对于其他输入类型,宽度以像素为单位
maxlength	此属性用于指定可在text或password元素中输入的最大字符数.默认值无限大
checked	此属性用于指定按钮是否被选中.当输入类型为radio或checkbox时,使用此属性

3.1.1文本框

<form method="post" action="">
   <p>
         名字:
             <input name="text" value="" name="fname"/>
   </p>
    <p>
        姓氏:
                <input name ="lname" value="张" type="text"/>
     </p>
      <p>
       登录名:
                <input name="sname" type="password" size="30"/>
      </p>
</form>

登录名长度不能超过20个字符:

<p>

登录名:

<input name ="sname" type ="text" size="30" maxlength="20">

</p>

3.1.2 密码框

<form method="post" action="">
   <p>
         用户名:
             <input name="name" type="text" size="21"/>
   </p>
    <p>
        密码:
               <input name="name" type="password" size="22"/>
     </p>

</form>

3.1.3 单选按钮

<form method="post" action="">
性别:
             <input name="name" type="radio" value="男"/>男
              <input name="name" type="radio" value="女"/>女

</form>

3.1.4复选框

<form>
<input type="checked" name="interest" value="sport"/>运动
<input type="checked" name="interest" value="talk"/>聊天
<input type="checked" name="interest" value="play"/>玩游戏
</form>

3.1.5 列表框

<select name ="列表名称" size="行数">
 <option value="可选项的值" selected="selected">......</option>
    <option value="可选项的值">......</option>

<form method ="post" action="">
  出生日期:
   <input type =text name ="year" size="4" maxlength="4"/>年
   <select name="bmon">
   <option value="">[选择月份]</option>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
           ......
<option value="12">12月</option>
</select>
<input type="text" name ="body" value="dd" size="2" />日

</form>

3.1.6 按钮

<input type ="reset" name ="Reset" value="重填"/>

其中type=button 表识普通按钮 submit表示提交按钮 reset 表示重置按钮

3.1.7 多行文本域

<textarea name ="textarea " cols="显示的列数" rows="显示的行数"> 

  文本内容

</textarea>

3.1.8 文件域

文件与在不同的浏览器中显示效果不一样,但功能一样

文件域会创建一个不能输入内容的地址文本框和一个"选择文件"按钮或"浏览"按钮.单击"选择文件"按钮.将会打开"打开"对话框,选择文件后,路径将显示在地址文本框中.

3.1.9 邮箱

邮箱:

<input type ="email" name="email">

3.1.10 网址

<input type ="url" name="userurl"/>

如果网址没有提交成功,而是出现"请输入网址" ,出现这样的原因漏掉了协议类型 http://

3.1.11 数字

请输入数字:

<input type ="number" name="num" min="0" max="100" step="10">

3.1.12 滑块

<input type ="range" name="range1" min="0" max="100" step="2>

3.1.13 搜索框

<input type ="search" name="sousuo">

4.设置表单的隐藏域

<input type ="hidden" value="222" name="userid">

表单的只读和禁用

readonly(只读)

网站服务器方不希望用户修改得数据,

disadled(禁用)

只有满足某个条件后,才能选用某项功能

表单的注释

<lable for="表单元素的id" >标注的内容</lable>

表单的初级验证

好处:

减轻服务器的压力

保证数据的可行性和安全性

验证方法:

1.plaeholder:

plaeholder="请输入要搜索的关键字"

2.required:

required属性用于规定文本框填写内容不能为空,否则不允许提交

3.pattern

此属性用于验证input类型的文本框中用户输入的内容是否与定义的正则表达式相匹配,用户输入的内容必须符合正则表达式所致的规则,否则不能提交表单

pattern="^[358]d{9}"