表单

表单概述
- 表单简介
- - form 标签
输入标签
- 文本框
- - 语法格式
- 单选框和复选框
- - 语法格式
- 按钮
- - 语法格式
- 图像域和文件域
- - 语法格式
- 文本域
- - 语法格式
- 菜单/列表
- - 语法格式

表单概述

表单在网页中经常可见，基本上所有的需要提交收集信息的网站都需要用到表单，最常见的就是各种网站的登录页面，一个登陆页面最主要的就是各种表单元素的收集，表单主要使用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中，按钮有三种

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

语法格式

     <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：返回的值

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

HTML+CSS+JavaScript复习笔记持更（一）——标签篇
前言博主现在还是在校生,目前大三,突然想起HTML的很多基础都忘记的差不多了,于是买了几本基础书,创建这篇博文用于记录复习笔记,也希望我自己在整理的时候,能帮助大家加深一些基础知识的印象,本篇博文将 ...
HTML+CSS+JavaScript复习笔记持更（九）——CSS3常用属性之盒模型
盒模型盒模型是CSS中最最重要的概念之一了,这个概念比较抽象,它规定了元素框处理元素内容.外边距.内边距.边框的方式. 内.外边距的属性内边距:padding 外边距:margin 边框:bord ...
HTML+CSS+JavaScript复习笔记持更（八）——CSS3常用属性之列表
列表属性之前已经介绍过了列表标签.主要有有序列表和无序列表,为了更好地控制这两种列表,CSS还提供了这两种列表的样式设置. list-style(简写属性,把所有列表的属性设置写到一个声明中) li ...
HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本
文本相关文本相关,包含了文字样式和文本换行等格式文字文字是一个网页最基础的部分,文字主要有以下几种属性: 字体文字大小文字颜色水平对齐方式段首缩进方式语法格式: <!DOCTYP ...
HTML+CSS+JavaScript复习笔记持更（七）——CSS3常用属性之背景
背景设置 HTML页面中的背景是通过background设置的. 语法格式: <!DOCTYPE html> <html lang="en"> <he ...
HTML+CSS+JavaScript复习笔记持更（五）——CSS选择器
CSS选择器在一个页面中,必不可少的就是css样式,css样式全都写在style标签中,在使用css时,我们可以用的css选择器非常之多,所以css选择器的分类也很多,但是基本上可以统计分为两类:基 ...
HTML+CSS+JavaScript复习笔记持更（四）——多媒体篇
HTML5的多媒体在html5中新增了两个多媒体标签 audio音频标签 video视频标签语法格式在语法格式上,音频与视频,大致相同 (无法正常播放) <video src=" ...
HTML+CSS+JavaScript复习笔记持更（二）——列表篇
列表无序列表标签写法属性有序列表标签写法属性列表嵌套定义列表的嵌套有序列表和无序列表的嵌套列表在html中至关重要,通常用于各种分类页面,以某宝为例,其主页面有大部分涉及到列表(绿 ...
HTML+CSS+JavaScript复习笔记持更（十）——CSS3常用属性之定位
定位定位主要是用来设定元素在页面上的位置的,其代码为:position 定位有三种定位方式: static(无特殊定位,按照dom排序) absolute(绝对定位,往前面找最近的,有定位属性的元素 ...

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

表单

表单概述

表单简介

form 标签

输入标签

文本框

语法格式

单选框和复选框

语法格式

按钮

语法格式

图像域和文件域

语法格式

文本域

语法格式

菜单/列表

语法格式

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

最新文章

热门文章