表单的基本用法

一、学习目标

1、会使用表单元素布局表单

2、会制作语义化的表单

3、会使用HTML5属性初步验证表单

二、表单语法

action表明了向何处发送数据，method是规定发送数据的形式，常用的是get（直白的发送，安全性不高）和post（加密发送，一般都用这种）enctype是表单编码属性，不同的表单编码有不同的兼容性，像utf-8就可以兼容中文

<form action='' method='' enctype="multipart/form-data"></form>

在表单中需要加入一系列的标签

标签一般由<input name='' type=''  />根据type的不同<input />中可加入的内容也会有一些差异

例如：<input name='name' type='text'>这是文本类型后面一般就不用加东西

<input name='passwd' type='passwd' minlength='4'>密码类型一般需要为密码设置一个最小长度

在input中有很多的属性：

<input name='' type=''></input>在type中有很多的类型：

文本框：text

密码框：PassWord

单选按钮：radio

复选框：checkbox

按钮：resert（重置），image（图片提交），submit（提交），button（普通按钮：可以自己定义按钮的作用是很重要的）

文件域：file（用文件域的时候需要配置在表单标签的属性中加入enctype）

邮箱：email

网址：url

数字：number

滑块：range

搜索：serach

除了<input /> 标签还有

列表框：

<select name="列表名称" size="行数">

<option value="选项的值" selected="selected">…</option >

<option value="选项的值">…</option >

</select>

多行文本域：

<textarea name="showText"  cols="x"  rows="y">

文本内容

</textarea  >

三、表单的高级应用（隐藏域、只读、禁用）

1、隐藏域：会在视图的时候不显示所隐藏的内容，但是发送的时候还是存在的内容（例如身份证信息很重要却不应该在视图层显示）

具体实现：<input type="hidden" value="666" name="userid">

2、只读：在定义好values值后不希望再被更改就可以用只读

具体实现：<input name="name" type="text" value="张三"  readonly>

3、禁用：使得所禁用的按钮或者输入框无法选中

具体实现：<input type="submit "  disabled   value="保存" >

四、表单元素的标注

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

具体实现：

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

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

五、表单的初级验证

1、目的：减轻服务器的压力，保证数据的可行性和安全性

2、方法

placeholder：文本框输入内容提示

适用于：input标签：text，search、url，email，PassWord等类型

具体实现：input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

required：规定输入内容不能为空

适用于：input标签：text，search，url，email，PassWord，number，checkbox，radio，等类型

具体实现：<input type="text" name="username"  required/>

pattern：正则表达式（用户输入的内容必须满足设定的规则）

具体实现：<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

（在pattern中，^表示开始，1表示开头的数字要会1，[358]表示在3,5,8中间选择一个数，\d表示0~9中间的任意一个数，{9}表示执行9次循环操作）

六、例子

<form action="welcome.html" method="get">
            <p>
                输入用户名：
                <input type="text" name="userName" maxlength="10" size="10"/>
            </p>
            <p>
                输入密码：
                <input name="userPwd" type="password" minlength="4" maxlength="8"/>
            </p>
            <p>
                输入邮箱：
                <input  name="userEmail" type="email"/>
            </p>
            <p>
                请输入你的网址：
                <input name="userArea" type="url" />
            </p>
            <p>
                请输入数字：
                <input name="userNum" type="number" />
            </p>
            <p>
                请输入滑块数字：
                <input name="userHnum" type="range"/>
            </p>
            <p>
                请输入搜索的关键字：
                <input name="sousuo" type="search"/>
            </p>
            <p>
                请选择你的性别：<br />
                <input name="userSex" type="radio" value="男" checked/>男&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="userSex" type="radio" value="女"/>女
            </p>
            <p>
                请选择你的兴趣爱好：<br />
                <input name="userLike" type="checkbox" value="运动"/>运动&nbsp;&nbsp;&nbsp;
                <input name="userLike" type="checkbox" value="聊天"/>聊天&nbsp;&nbsp;&nbsp;
                <input name="userLike" type="checkbox" value="玩游戏"/>玩游戏
            </p>
            <p>
                请选择你的籍贯：<br />
                <select name="province">
                    <option value="湖南">湖南</option>
                    <option value="湖北">湖北</option>
                    <option value="西安">西安</option>
                </select>省&nbsp;&nbsp;&nbsp;
                <select name="city">
                    <option value="长沙">长沙</option>
                    <option value="桃江">桃江</option>
                    <option value="湘阴">湘阴</option>
                </select>市
            </p>
            <p>
                请选择你的生日：<br />
                <input name="userBirth" type="date"/>
            </p>
            <p>
                上传证件照：<br />
                <input name="userphoto" type="file"/>
                
            </p>
            <p>
                个人简介：<br />
                <textarea name="userMessage" cols="10" rows="50" ty></textarea>
                
            </p>
            <p>
                <input type="submit" value="提交"/>
                <input  type="button" value="普通按钮"/>
                <input type="reset" value="重置"/>
                
            </p>
        </form>

七、总结

1、表单的主要作用是用来制作动态网页、方便和用户进行交互

2、表单学习包括：常用的表单元素、表单的高级应用、表单的初级验证

3、对于表单的学习目前还是主要是记住每个类型的语法格式以及多种类型的作用等等