HTML+CSS+JavaScript复习笔记持更（三）——表单篇

表单概述

表单在网页中经常可见，基本上所有的需要提交收集信息的网站都需要用到表单，最常见的就是各种网站的登录页面，一个登陆页面最主要的就是各种表单元素的收集，表单主要使用form标签来完成

表单简介

表单通常设计在HTML中，当用户按照提示信息填写完成后，浏览器通将信息提交到后台服务器上，经过服务器的处理验证后，再将用户需要的信息传回，这样就完成一个交互。

表单在这里最主要的功能就是收集信息，具体来说是收集浏览者的信息，例如各种登录界面，筛选，搜索等模块，在表单元素中，最常用的就是文本框、密码框、单选按钮、复选框等

举例，大学慕课的登录页面：

form 标签

表单是html页面中的某个区域，而这个区域有form标签进行划分，form是双标签，所有的表单元素和必要的提示信息，都必须写在form标签中。语法格式如下：

 		<form action="" name="" method="" enctype="" target="">
            用户名：<input type="text" value="">
            密码：<input type="password">
        </form>

在form标签中还可以设置表单的基本属性，包括表单的名称、处理程序、传送方式等，各属性值含义如下：

form属性	含义	说明
action	表单的处理程序，即收到表单后需要传送到什么地址	这个地址可以是绝对地址，也可以是相对地址，也可以是E-mail邮箱地址
name	表单的名称	防止后台多个表单互相错乱，表单名称最好与实际作用有关
method	处理程序从表单中获取信息的方式，有get（默认）和post两个值	get方式会被视为CGI或者ASP的参数发送 post方法指表单数据与URL分开发送，用户端的计算机会通知服务器来读取数据
enctype	r表单信息的编码方式有三个属性值 text/plain application/x-www-form-urlencoded multipart/form-data	第一种是纯文本形式传送 第二种是默认的编码格式 第三种是MIME编码，上传文件的表单必须用着这个编码
target	目标窗口的打开方式	与a链接标签的target属性相同

提供一个登录页面的小案例：

<!-- html部分 -->
    <div class="box">
        <h2>欢迎登录</h2>
        <form action="" name="" method="" enctype="" target="">
            <label for="" class="name">
                <p>用户名：</p>
                <input type="text" value="">
            </label>
            <label for="" class="pass">
                <p>密码：</p>
                <input type="password">
            </label>
            <label for="" class="ok">
                <input type="submit">
                <input type="reset">
            </label>
        </form>
    </div>

 		/* css部分 */
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 600px;
            background-color: chartreuse;
            margin: 0 auto;
        }
        .box h2{
            width: 100px;
            text-align: center;
            margin: 0 auto;
        }
        .box p{
            width: 80px;
            float: left;
        }
        .box label{
            line-height: 40px;
            display: block;
        }
        form{
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }
        .ok{
            width: 100px;
            margin: 0 auto;
        }

输入标签

输入标签就是<input>标签，通过设置其type值即可呈现出不同的表单元素，常用的几种为：

• 文本框
• 单/多选框
• 按钮
• 文件框
• 图像域

文本框

表格中常用的文本框有两种

• 单行文本框
• 密码框

单行文本框的type属性应该设置为text
密码文本框的type属性应该设置为password

在密码框中输入的字符，将会被隐藏为***或者原点标识

语法格式

 		<form action="" class="xxx">
            <input type="text" name="" size="" maxlength="" value="请在这里输入...">
            <input type="password" name="" size="" maxlength="" value="...">
        </form>

单行文本框与密码框一样，都有额外的4个属性

• name命名文本框，用于与其他表单元素作区分
• size表示文本框在页面中显示的长度，以字符为单位
• maxlength表示最长输入长度
• value表示文本框中的默认文字

单选框和复选框

顾名思义，单选框用于只能单选的选项，复选框用于可多选的选项
单选举例：性别选项
复选举例：兴趣爱好

语法格式

		<form action="">
            <label for="">
                <input type="radio" value="男" name="sex" checked="checked">男
                <input type="radio" value="女" name="sex">女
            </label>
            <input type="checkbox" value="篮球" name="like">篮球
            <input type="checkbox" value="足球" name="like">足球
            <input type="checkbox" value="羽毛球" name="like">羽毛球
            <input type="checkbox" value="乒乓球" name="like">乒乓球
        </form>

单选框：type值为radio，value值为传回信息，name是给单选取名字达到分组，否则无法将两个‘男和女’这两个单选框分到同一个类别，checked是默认选中

复选框：type值为checkbox，其他属性意思与单选框一致

按钮

在HTML中，按钮有三种

1. 普通按钮（常配合js使用）
2. 提交按钮（提交表单信息）
3. 重置按钮（重置表单信息）

语法格式

		<form action="">
            <input type="button" name="自定义" id="" value="打印">
            <input type="submit" name="按钮名" value="提交">
            <input type="reset" name="按钮名" value="重置">
        </form>

普通按钮：type="button" name是自定义名字 value是显示在html上的信息
提交按钮：type="submit"``name是自定义名字 value是显示在html上的信息（如果不写value，默认就是提交）
提交按钮：type="reset"``name是自定义名字 value是显示在html上的信息（如果不写value，默认就是重置）
注：普通按钮还有一个属性是click，通常接一个函数，但是这样写，一行代码过多，所以使用js绑定点击事件函数比较好

图像域和文件域

图像域：使用一些图片来代替按钮的显示，但是与按钮有一样的功能，即把按钮在页面上的显示更换为一张照片，用于增强美感

文件域：将本地文件上传到服务器端

语法格式

		<form action="">
            <input type="image" src="./img/01.jpg" width="50px" name="" id="" value="123">
            <input type="file">
        </form>

图像域：type="image"，src是图片路径，可以是相对路径，也可以是绝对路径，也可以添加width、height设置图片大小，name是设置按钮类型（button、submit）默认是button

文件域：type="file"

文本域

文本域：与文本框唯一的区别在于可以添加多行文字，通常用于大量输入字符的地方，如评价、答题界面、留言板

语法格式

<textarea name="pingjia" value="" id="" cols="30" rows="10"></textarea>

• name：文本域的名称
• value：默认的文字
• cols：列数
• row：行数

注：如果超出设置行数列数将会出现滚动条

菜单/列表

菜单/列表也被称为下拉框，即内置多个选项进行单选，这类选项一般是多选一，使用多个单选框比较浪费空间，所以使用下拉列表。

语法格式

		<form action="">
            <select name="" size="" id="">
                <option value="">不及格</option>
                <option value="">及格</option>
                <option value="">中等</option>
                <option value="">良好</option>
                <option value="">优秀</option>
            </select>
        </form>

                                             

使用select标签表示菜单/列表，使用option标签表示一个选项

• name：列表的名称
• size：列表显示长度，如果不使用或者0就是下拉列表，使用了就是列表
• value：返回的值