第三章 表单

1，表单在网页中的应用

        表单语法

         <form>表单标签

                method:表示如何发送表单数据，常用值：get|post

                action：表示提交路径

示例<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方式提交表单数据 

        表单元素格式

语法：<input  type="text"  name="fname" value="text"/>

        type文本类型（表单元素重点）

        属性： text文本框(默认值)

        password（密码框）

        radio（单选按钮）书写格式 checked表示默认选中

        checkbox 表示复选框(多选按钮)

        reset重置按钮键 (value为可改为清空)

        submit提交按钮 ( value可改为注册)

        image图像按钮 例如：<input type="image" src="images/login.gif" />（src为图片路径）

        button普通按钮 例如<input type="button" name="butButton" value="button按钮"/>

        file:文件域 必须在form标签中添加enctype="multipart/form-data"

        email：邮箱验证

        url:网站验证

        search：搜素框 placeholder提示语

        number：数字框 min最小值 max最大值 step步长

        range:滑块

        color 颜色

        tel 电话号

        datetime-local:日期选择

        hidden:隐藏域

2、表单的高级应用

        隐藏域

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

        只读

<input name="name" type="text" value="张三"  readonly>

        禁用

<input type="submit "  disabled   value="保存" >

         表单元素的标注

       作用： 增强鼠标的可用性 自动将焦点转移到与该标注相关的表单元素上

<label for="male">标注的文本</label>

<input type="radio" name="gender" id="male"/>

3、表单初级验证的方法 

placeholder：文本输入内容提示

语法：<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

required：文本输入不能为空

语法：<input type="text" name="username"  required/>

pattern：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单（例如手机号，年龄）

语法：<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

总结