前端入门——html 表单控件使用
上篇介绍了表单的使用，表单有很多控件，比如输入框，密码框、文本域，按钮等。按类型可分如下：
- 输入类控件
- 菜单类控件
此类控件有很多种类型，使用<input type=\”类型\”>语法，常见类型如下：
文本输入框和密码框
除了显示形式不一样，其它属性一样，有以下属性：
- name —— 定义文字字段名称，用于和其它控件区别，不能包含特殊字符，也不可使用html 标签名称
- maxlength —— 定义文本框可输入字符最大长度
- size —— 定义文本框在页面中显示的长度
- vaule —— 定义文本框中默认的值
如下是文本输入框和密码框制作一个登录表单
html代码：
显示效果：
HTML5 输入类型
除了以上几种类型，HTML5 还增加了多个新的输入类型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
如下代码：
效果如下：
单选和多选按钮
使用 type = “radio” 和 type =“checkbox” 定义是单选还是多选，除了name和value属性外，单选和多选都有一个 checked属性定义默认选择的项，checked = “true”指选中那个选项，表单会将 checked = “true” 的选型值传递给后台。
如下实例：
显示效果：
单选和多选传递给后台的数据是不一样的，如下会看到地址栏中的数据，多选会发送多个值，后台将会获取一个数组形式的数据。
普通按钮、提交按钮、重置按钮
普通按钮：type = “button”，一般配合脚本使用，语法如下：
value 值就是按钮在页面显示的文字，onclick属性定义了脚本事件，这里指单击按钮时所进行的处理。
如下示例：
单击您好按钮
提交按钮：type = “submit”，用于提交表单内容，是一种特殊按钮。
如刚才的登录表单，提交后会返回结果：
重置按钮：type=\”reset\”，用于清除表单数据，也是一种特殊按钮。
输入数据
点击重置按钮后，表单数据清空
重置清空数据
HTML5 按钮
除了使用input定义按钮，还可以使用 html5 新增的<button> 标签定义按钮，button 使用语法如下：
其它输入类控件
隐藏域 —— hidden文件域 —— file
如下示例：
显示效果
可以看到，隐藏域在页面中不显示，单击文件域选择文件按钮可以选择文件，比如word文件，电子表格文件等，会以非文本方式传送到后台的，常用来实现文件上传功能。
除了input 类型的控件，还有文本域 textarea ，一种特殊的文本框，它与input 文本输入框的区别就是可以输入多行文字，input 文本输入框是单行的无法输入多行文字。
如下示例：
效果如下：
rows 属性定义文本域的高度是几行，cols 定义文本域宽度占几列，比如上面定义了高10行宽30列的文本域。
下拉菜单作用和单选按钮类似，只不过它更加节省空间，当要选择的选型很多时，就不适合使用radio空间，所以当选项很多的时候，使用下拉菜单，语法如下：
多选列表和多选按钮类似，一样为了节省空间，当数据选项比较多时，使用多选列表，语法如下：
多选比下拉菜单不同之处是多了一个multiple属性，定义多选的，且表现形式也不一样，不是下拉而是一个列表。
如下代码：
显示效果：
这里需要注意的是，多选列表多选时需要按住ctrl键同时鼠标单击选择才能多选，效果如下：
到这里，已介绍了大部分的表单控件，现在你可以使用他们制作自己的表单，表单通常在动态网站中使用，这为以后制作动态网站打下基础。
还有许多属性没有讲到，比如html5新增的一些属性和功能，可自行参考 w3cshool 等网站学习，感谢关注，学习愉快！
上篇 ：
下篇： 前端入门 —— 网页中使用窗口框架
[TFBOYS][置顶]160130 “Music Radio音乐之声”投票教程
“Music Radio音乐之声”投票评选活动正在如火如荼进行中，TFBOYS提名“年度最受欢迎组合”奖项！ 该活动将在2016年4月3日在北京工人体育馆举行年度盛典，逾20组人气歌手齐聚北京，星光熠熠全球闪耀！说好要给三小只每一个第一名、我们努力投票打榜让他们登上颁奖台！家人们，加油！
有两个投票方式:
1.网站投票方式：访问投票页面 【http://web.musicradio.cc/index.html】进行投票，每个注册用户每天最多可以投6票，各奖项类别内限投1票。
2.微信投票方式： 关注“MusicRadio音乐之声”微信公众号，点击【金榜投票】即可。投票区内每个注册用户每天最多可以投6票，各奖项类别内限投1票。 也可从这里点击进入投票【http://m.musicradio.cc/song/list/3.html】
投票清除刷票公告：
为确保各奖项投票期间投票行为是基于公平、公正、合理之原则，投票区将于每日24点统一对不公平刷票予以清除。
投票小贴士:
1.网页投票如果登陆失败或者进不去，可以在新浪微博搜索“全球音乐流行金榜”，找到相关链接即可投票！（或搜索“Music Radio”微博，找到其主页的相关微博有关链接）
2.手机微信客户端,如遇不能投票或登陆后提示重新登陆等问题，请尝试升级微信版本后重试或使用手机浏览器打开投票页面进行投票。
网页设计HTML零基础入门
Html中标签分为 ：成对标签和自闭合标签【空标签】
成对出现，有开始标签必须有结束标签，内容包裹在两个标签中，而且开始标签名和结束标签名一致,并且结束标签必须以斜杠/开头
语法：
只有一个标签，用斜杠结束，斜杠也可以省略
语法：
注意事项：
- 成对标签中，结束标签必须以斜杠开头
- 成对标签与成对标签可以嵌套不能交叉
- 标签名不区分大小写，但是我们都必须小写
!DOCTYPE html是文档声明，定义文档类型为html，并且告诉不同的浏览器用标准方式进行解析html语言，如果不写的话，会产生怪异模式，所谓怪异模式，就是浏览器会用自己的方式进行解析，不同的浏览器有各自的解析方式，从而会出现无效果、不兼容等问题。
注意，html中有两种声明类型，一种叫做xhtml，即html，另一种叫做html5，html5是xhtml的升级版，所以我们建议使用html5的声明方式
xhtml声明方式：
<htmlxmlns=\”http://www.w3.org/1999/xhtml\”>
html5声明方式：
<!DOCTYPE html>
html是html文档的整体，也就是表示一个网页。
html中的lang=\”en\”是定义该文件语言是英文
head是html的第一层子元素【子标签】，负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏中。即title标签。
meta是html语言head标签中的一个辅助性标签，该标签不包含任何内容，但是该标签的属性定义了与文档相关联的名称，比如：编码
body也是html的第一层子元素，我们页面中显示的所有内容全部都是编写在该标签体中。
html制定了文档的编写规范，必须遵守。
所有的标签必须小写
所有的属性必须用双引号括起来
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。
注释的语法：
<!– 注释的内容 –>
注：属性是标签的辅助作用。
属性 描述 bgcolor 设置网页的背景颜色 background 设置网页的背景图片
设置网页的背景颜色
我们在开发网页时，需要经常的插入图片、视频、文件等一些操作，但是我们需要指定文件所在的位置，这个位置就是所谓的路径
路径分为：
- 相对路径 指目标相对于当前文件的路径，网页结构设计中多采用这种方式来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下： ./ ：代表文件所在的目录（可以省略不写）../ ：代表文件所在的父级目录../../ ：代表文件所在的父级目录的父级目录/ ：代表文件所在的根目录【/ ： 可以理解为目标文件的绝对路径】
- 绝对路径 指目标文件的完整路径，从盘符开始。
设置网页的背景图片
注意事项：
bgcolor和background不能同时使用
background不能指定绝对路径
网页的组成：文字、图片、视频、超链接、列表、表格、表单等组成。
标签 描述 hn 设置文字标题【n：取值范围 1~6】 center 居中对齐 hr 水平线 属性（width：宽度 color：颜色 size：粗细） br 换行 p 段落
标签 描述 font 设置字体，需要借助属性设置
属性 描述 color 设置字体颜色 size 设置字体大小，不需要带单位，取值范围：1~7【浏览器默认值：3】 face 设置字体风格
标签 描述 b 定义粗体文本 em 定义着重文字 i 定义斜体文字 small 定义小号字 strong 定义加重语气 sub 定义下标字 sup 定义上标字 ins 定义插入字 del 定义删除字
在Html中，图像由
标签定义。
是空标签，意思是说，它只包含属性。
要在页面上显示图像，你需要使用源属性（src）。src指\”source\”。源属性的值是图像的URL地址。
标签 描述 img 图片标签
属性 描述 src 指定图片的地址 width 设置图片的宽度 height 设置图片的高度 alt 设置图片的预备文本
注意事项：不建议设置图片大小，容易失真
在Html中，声音由标签定义。
标签 描述 audio 声音标签
属性 描述 src 指定声音地址
在Html中，视频由video标签定义
标签 描述 video 视频标签
属性 描述 src 指定视频地址
a标签定义超链接，用于从一个页面链接到另一个页面。
a标签最重要的属性是href，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
语法：
属性 描述 href 指定链接目标 name 指定锚的名称 download 指定下载链接 target 指定跳转方式 属性值 描述 _blank 新窗口打开【常用】 _parent 在父窗口中打开链接【了解】 _self 默认，在当前窗口打开【了解】 _top 在当前窗体打开链接，并替换当前的整个窗体【了解】 framename 到 iframe 在讲【常用】
超链接分类：
- 内部链接 链接目标：本地页面 <a href=\”demo.html\”>点击内容</a>
- 外部链接 链接目标：外部页面 <a href=\”http://www.baidu.com\”>点击内容</a>
- 多媒体链接 链接目标：图片、视频等 <a href=\”images/美女.jpg\”>点击内容</a>
- 电子邮件链接 链接目标：电子邮件【系统自带的电子邮件】 <a href=\”mailto:12345@qq.com\”>点击内容</a>
- 锚链接 链接目标：锚点 1.建立锚点<a name=\”锚点名\”></a>2.跳转<a href=\”#锚点名\”>点击内容</a>
列表的使用与word等软件的列表概念相似，只不过是应用在网页展示中。
有序列表是指有数字编号或字母的列表项，可以使用css定义更多样式。
属性 描述 type 设置符号类型 值：1 a A I i 默认数字 start 从第几个开始【用于ol标签中】 value 从第几个开始【用于li标签中】
无序列表是指没有数字编号或字母的列表项，可以使用css定义更多样式。
属性 描述 type 用于设置符号类型，默认：实心圆 值：空心圆、正方形 【用于ul、li】
描述列表指每个列表项有单独的标题。
表格在网页开发中使用频率非常高，尤其是数据展示的时候。
标签 描述 table 代表表格标签 caption 表格标题 thead 表头部分 tbody 表格主体部分 tfoot 表格尾部
属性 描述 border 表格边框 cellspacing 单元格与单元格间距 width 宽度 height 高度 bgcolor 设置背景颜色 background 设置背景图片 align 对齐方式
属性 说明 rowspan 行合并 colspan 列合并
下面是行合并：
下面是列合并：
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkbox)等等。
表单需要使用表单标签来设置：
<!– 表单 –><form>input元素</form>
属性 说明 action 后台地址 method 提交方式GET或POST
GET和POST区别：
1.GET
- 数据会显示在地址栏中，数据不安全
- 数据大小有限制
- 数据通过请求头传递
2.POST
- 数据不会显示在地址栏中，数据安全
- 数据对大小无限制
- 数据通过实体内容传递
使用label用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。
也可以将文本框放在label标签内部，这样就不需要设置id与for属性了。
文本框用于输入单行文本使用，下面是常用属性与示例。
属性 说明 type 表单类型,默认为text name 后端接收字段名 required 必须输入 placeholder 提示文本内容 value 默认指 maxlength 允许最大输入字符数 size 表单长度,一般用css来控制 disabled 禁用,不可提交后端 readonly 只读,可提交后端 accept 设置选中类型 比如:.jpg capture 使用麦克风\\视频或摄像头哪种方式获取手机上传文件,支持的值有microphone , video , camera
当input类型为file时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码.
通过设置表单的type字段可以指定不同的输入内容.
类型 说明 email 输入内容为邮箱 url 输入内容为URL地址 password 输入内容为密码项 tel 电话号,移动端会调出数字键盘 search 搜索框 hidden 隐藏表单 submit 提交表单 reset 重置表单 button 自定义按钮
隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义.
创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据,比如:AJAX,或者Html的表单按钮.
a.使用input构建提交按钮,如果设置了name值,那么按钮数据也会提交到后台,如果有多个表单项可以通过这些进行判断是哪个表单提交的.
b.使用button也可以提交,设置type属性为submit或不设置都可以提交表单.
通过为表单设置disabled或readonly都可以禁止表单,单readonly表单的数据可以提交到后端
表单可以通过设置pattern属性指定正则验证.
属性 说明 pattern 正则表达式验证规则 oninvalid 输入错误时触发的事件
文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor , ckeditor等.
属性 说明 cols 列字符数(一般使用css控制更好) rows 行数(一般使用css控制更好)
下拉列表项可用于多个值中的选择.
属性 说明 multiple 支持多选 size 列表框高度 optgroup 选项组 selected 选中状态 option 选项值
单选框指只能选择一个选项的表单,如性别的选择:男 , 女 , 保密 只能选择一个.
属性 说明 checked 选中状态
复选框指允许选择多个值的表单
属性 说明 checked 选中状态
文件上传有很多方式,可以使用插件或者JS拖放上传处理.Html本身也提供了默认的上传功能,只是上传效果并不是很美观.
属性 说明 multiple 支持多选 accept 允许上传类型.png , .psd 或者 image/png , image/gif
属性 说明 min 最小时间 max 最大时间 step 间隔: date缺省是1天 week缺省是1周 month缺省是1月
a.日期选择
b.周选择
c.月份选择
d.日期与时间
input表单的输入值选项列表
frameset元素可定义一个框架集。它被用来组织多个窗口（框架），每个框架存有独立的文档，在其最简单的应用中，frameset元素仅仅会规定在框架集中存在多少列或多少行，您必须使用cols或rows属性。
注意事项：由于是分割原网页，所以我们不能在body中进行编写，在head中进行分割。
标签 说明 frameset 框架集 frame 框架
属性 说明 cols 定义框架集中列的数目和尺寸 rows 定义框架集中行的数目和尺寸 frame border 去除框架边框 scrolling 去除滚动条
12.2 水平框架
iframe元素会创建包含另外一个文档的内联框架。
属性 说明 align 对齐方式，后期采用css的方式进行设置 width 设置宽度 height 设置高度 src 设置iframe中显示的文档的URL name iframe的名称 scrolling 是否显示滚动条 frameborder 设置iframe的边框
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
