整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
为了不再被疑似涉嫌低俗，我只能给大家提供这种图片了，耐得住寂寞才能学有所成！吸引人的东西未必珍贵。
昨天我们学习了《HTML表单元素初识1——零基础自学网页制作》（目录在结尾），大家通过学习对HTML页面中的表单元素的基本写法已经非常熟悉了。同时也学会了通过变换<input/>标签中的type属性的值为表单赋予不同的功能，例如输入文本和建立多选表单。期间，对name与value这两个属性的作用与特点进行了阐释。今天我们继续学习新的表单内容。
建立单选表单：单选表单把<input/>标签的type属性修改为"radio"（收音机），为什么单选表单使用"收音机"这个词呢？其实道理很简单，收音机调频旋钮是对应角度对应相应调频，不可能一个角度对应两个调频，所以选这个就不能选其他的表单中的type属性使用"radio"这个词表示，是不是很形象。
示例代码如下：
<form>
最高学历：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>硕士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>因为描写的是最高学历，一般人最高学历只有一个，不可能又是学士又是博士，因此使用单选表单。
向服务器提交时，name叫做"education"（教育），value对应不同层次。
页面效果如下：
大家可以点点试试，每次只能有一个被选中。如图：
综合练习：到这为止，我们把之前零散的代码拼凑一下看看效果吧！
<!DOCTYPE HTML>
<html>
<head>
<title>表单 </title>
</head>
<body>
<form>
会员名称：
<input type = "text" placeholder = "请输入英文或汉语拼音" name="memberName"/><br>
会员密码：
<input type = "text" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br>
确认密码：
<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
<hr>
<form>
兴趣爱好：
<br>
<input type = "checkbox" name = "hobby" value = "reading"/>读书
<input type = "checkbox" name = "hobby" value = "film"/>电影
<input type = "checkbox" name = "hobby" value = "painting"/>绘画
<input type = "checkbox" name = "hobby" value = "music"/>音乐
<br>
最高学历：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>硕士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>
</body>
</html>页面效果如下：
密码输入：我们在使用上述表单输入密码时发现，密码时实时显示在输入框中，这一点是不安全的，如图：
如何让密码隐藏呢？其实看过上一篇中type属性列表的小伙伴肯定猜到了，把type从"text"改为password。示例代码如下：
会员密码：
<input type = "password" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br>
确认密码：
<input type = "password" name="confirmPassWord"/><br>页面效果如下：
上传文件：使用type="file"可以上传文件！
示例代码如下：写在"submit"的上面即可。
<input type = "file"/><br><input type = "submit" value = "submit"/>页面效果如下：
点击"浏览"看下效果：
神奇！
使用图片制作按钮：将type="image"即可，代码如下：
<input type = "image" src = "img/示例图片/submit.jpg"/><br>页面效果如下：用一个src导入图片即可。
示例图片：路径自行设置即可！
为表单设置一个重置按钮：如果用户打算重置表单内容后从新填写，我们可以给他这样一个按钮：
<input type="reset" /><br>页面如图所示：
大家要注意的是这个"重置"按钮的作用范围仅仅是它所在的<form></form>标签之间！
举个例子，如图：
下面我们点击"重置"后效果如下：
form1中的内容没有被清空，"重置"按钮所在的form2内容被清空了！
type属性值讲解我们到此结束了，hidden值这里先不给大家介绍，以后有机会再细说。
button值以后在JavaScript部分还会细说，这里也先略过。
除了<input/>外，还有其他一些标签，例如<select>或<textarea>等有趣且实用的标签，我们明天再学习吧！
今天的内容先到这里。希望大家看完之后可以写写代码进行实操。代码这种东西即使再简单，写过和没写过的体会也是不一样的。这个部分的代码使用"文本编辑器"就可以实践。具体操作请详见《》。
碎片化的知识其实对人并没有多大作用，但是我们的时间在现代化的生活节奏中被撕地越来越碎，因此我希望大家可以利用碎片时间来学习完整的知识，所以，以短篇的形式，每天20分钟左右，通过积少成多的办法为大家提供零基础页面制作的教程体系是我的主要目的。希望大家学有所成！
喜欢我的教程的小伙伴请关注我，点赞也会让我充满动力！
喜欢的小伙伴请关注和转发，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
.槪念
用来收集用户输入的信息，定义采集数据的范围，并且完成与用户的基本交互的作用。
表单就是输入框、单选框、复选框、按钮、选项菜单等网页元素，也称表单元素。
2.语法
form标签，所有表单元素都要放在form标签中。
<form action = "#" method = "get">xx</form> <!-- # 是没有数据时的占位--> from标签属性：
① action：设置发送数据的位置；
② method：用什么方式发送数据。
属性值分为get和post：get，发送数据时直接显示在url栏中，发
送数据量小，且不安全；post，直接通过服务器发送数据，用户看不到过
程，且数据量较大。
3.表单元素
一般使用 input标签：
<form action = "#" method>
<input type = "text" name = "age"/>
</form>input标签属性：
type属性：设置当前输入框的不同形态。值分别为：
password 密码框，text输入文字、字母、数字等
submit 提交按钮，reset 重置按钮
button 普通按钮，checkbox 表单复选框
radio表单单选框。
name 属性：给当前的表单元素数据起个名字，不能是中文和特殊符号。 （除了按钮标签外需要输入数据的都要加name属性）
value 属性：当前表单元素的默认值，在按钮标签中会显示在按钮上，在选项框里必须有，否则后端看到为on。
例如，<input type = "radio" name = "sex" value = "男"/>，传递给后端数据为sex=男，如果不写value，则显示sex=on。
placeholder属性：输入框的提示信息。
maxlength属性：设置输入text和password输入框的最大字符数。
size属性：当type = "text"或"password"时，设置元素的宽度。
checked属性：当type为radio或checkbox时，设置单选框或复选框的默认选中项。
4.扩展表单元素
如图，select 标签表示声明下拉列表；option 标签用于声明列表项；selected 改变下拉列表默认选中项。
多文本域（textarea）：
表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。
web前端基础学习-from表单的使用
北京尚学堂的视频
· 63 播放
节数 | 知识点 | 要求 |
第一节 （form） | 表单概念 | 了解 |
Form | 掌握 | |
Get和post的区别 | 掌握 | |
第二节（表单元素） | 表单元素1 | 掌握 |
表单元素2 | 了解 | |
第三节（表单元素的属性） | 表单元素的属性 | 掌握 |
第四节（HTML5新增） | HTML5新增type类型 | 了解 |
第五节（HTML5新增） | HTML5新增属性 | 掌握 |
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
<form action＝"url" method=get|post name="myform" ></form>-name：表单提交时的名称-action：提交到的地址-method：提交方式，有get和post两种，默认为get |
1、数据提交方式，get把提交的数据url可以看到，post看不到
2、get一般用于提交少量数据，post用来提交大量数据
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。
1.表单标签
是指<form>标签本身，它是一个包含表单元素的区域，使用<form></form>定义
2.表单域
是<form>标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。（比如：文本域、下拉列表、单选框、复选框等等）
3.表单按钮
用来提交<form>表单中的所有信息到服务器
表单域和表单按钮都属于表单元素
2.1文本框
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form> |
浏览器显示如下：
2.2密码框
密码字段通过标签<input type="password"> 来定义:
<form> |
浏览器显示效果如下:
注意:密码字段字符不会明文显示，而是以星号或圆点替代。
2.3单选按钮
<input type="radio"> 标签定义了表单单选框选项
<form> |
浏览器显示效果如下:
2.4复选框
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form> |
浏览器显示效果如下:
2.5文件
定义文件选择字段和 "浏览..." 按钮，供文件上传：
选择一个文件: <input type="file" name="img"> |
2.6隐藏域
定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值：
<input type="hidden" name="country" value="Norway"> |
2.7提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.php" method="get"> |
浏览器显示效果如下:
2.8重置按钮
定义重置按钮（重置所有表单值为默认值）：
<input type="reset"> |
提示：请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情。
2.9按钮
没有任何功能的按钮
<input type="button" value="点我"/> |
2.10图像图片按钮
定义图像作为提交按钮：
<input type="image" src="img_submit.gif" /> |
2.11按钮
<button> 标签定义一个按钮。
在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。
2.12下拉列表
<select> 元素用来创建下拉列表。
<option> 标签定义下拉列表中的一个选项（一个条目）。
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option></select> |
<optgroup> 标签经常用于把相关的选项组合在一起。
如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。
2.13多行文本框
<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
<textarea rows="10" cols="30"> |
2.14labe
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
<form action="demo_form.php"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><input type="submit" value="提交"> </form> |
3.1email
定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）
E-mail: <input type="email" name="usremail"> |
3.2url
定义用于输入 URL 的字段：
添加你的主页: <input type="url" name="homepage"> |
3.3search
定义搜索字段（比如站内搜索或谷歌搜索等）：
Search Google: <input type="search" name="googlesearch"> |
3.4tel
定义用于输入电话号码的字段：
电话号码: <input type="tel" name="usrtel"> |
3.5color
从拾色器中选取颜色：
选择你喜欢的颜色: <input type="color" name="favcolor"> |
3.6number
定义用于输入数字的字段（您可以设置可接受数字的限制）：
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5"> |
请使用下面的属性来规定限制：
max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。
3.7range
定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制：
<input type="range" name="points" min="1" max="10"> |
请使用下面的属性来规定限制：
max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。
3.8date
定义 date 控件：
生日: <input type="date" name="bday"> |
3.9month
定义 month 和 year 控件（不带时区）：
生日 ( 月和年 ): <input type="month" name="bdaymonth"> |
3.10week
定义 week 和 year 控件（不带时区）：
选择周: <input type="week" name="week_year"> |
4.1autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有 <input> 标签的类型。
User name: <input type="text" name="user_name" autofocus /> |
4.2multiple 属性
multiple 属性规定输入域中可选择多个值。
注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。
Email: <input type="email" multiple /> |
4.3placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
<input type="search" name="user_search" placeholder="Search W3School" /> |
4.4required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。
Name: <input type="text" name="usr_name" required /> |
视频介绍：
前端零基础入门学习之表单的使用
*请认真填写需求信息，我们会在24小时内与您取得联系。
