- HTML表单元素初识2——零基础自学网页制作
- 第一个HTML页面如何写？——零基础自学网页制作
- HTML表单元素初识1——零基础自学网页制作
- # 使用HTML添加表格2（表格头部与脚部）——零基础自学网页制
- 初识meta标签与SEO——零基础自学网页制作
- 初识HTML中的块元素——零基础自学网页制作
- HTML元素中的属性2（路径详解）——零基础自学网页制作
- 使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
- 为页面嵌入PDF文件——零基础自学网页制作
- HTML元素中的属性1——零基础自学网页制作
表单元素属性2
HTML表单元素初识2——零基础自学网页制作
昨天我们学习了《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对应不同层次。
页面效果如下：
HTML表单元素初识2——零基础自学网页制作
大家可以点点试试，每次只能有一个被选中。如图：
HTML表单元素初识2——零基础自学网页制作
综合练习：到这为止，我们把之前零散的代码拼凑一下看看效果吧！
<!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>页面效果如下：
HTML表单元素初识2——零基础自学网页制作
密码输入：我们在使用上述表单输入密码时发现，密码时实时显示在输入框中，这一点是不安全的，如图：
HTML表单元素初识2——零基础自学网页制作
如何让密码隐藏呢？其实看过上一篇中type属性列表的小伙伴肯定猜到了，把type从"text"改为password。示例代码如下：
会员密码：<input type = "password" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br>确认密码：<input type = "password" name="confirmPassWord"/><br>页面效果如下：
HTML表单元素初识2——零基础自学网页制作
上传文件：使用type="file"可以上传文件！
示例代码如下：写在"submit"的上面即可。
<input type = "file"/><br><input type = "submit" value = "submit"/>页面效果如下：
HTML表单元素初识2——零基础自学网页制作
点击"浏览"看下效果：
HTML表单元素初识2——零基础自学网页制作
神奇！
使用图片制作按钮：将type="image"即可，代码如下：
<input type = "image" src = "img/示例图片/submit.jpg"/><br>页面效果如下：用一个src导入图片即可。
HTML表单元素初识2——零基础自学网页制作
示例图片：路径自行设置即可！
HTML表单元素初识2——零基础自学网页制作
为表单设置一个重置按钮：如果用户打算重置表单内容后从新填写，我们可以给他这样一个按钮：
<input type="reset" /><br>页面如图所示：
HTML表单元素初识2——零基础自学网页制作
大家要注意的是这个"重置"按钮的作用范围仅仅是它所在的<form></form>标签之间！
举个例子，如图：
HTML表单元素初识2——零基础自学网页制作
下面我们点击"重置"后效果如下：
HTML表单元素初识2——零基础自学网页制作
form1中的内容没有被清空，"重置"按钮所在的form2内容被清空了！
type属性值讲解我们到此结束了，hidden值这里先不给大家介绍，以后有机会再细说。
button值以后在JavaScript部分还会细说，这里也先略过。
除了<input/>外，还有其他一些标签，例如<select>或<textarea>等有趣且实用的标签，我们明天再学习吧！
今天的内容先到这里。希望大家看完之后可以写写代码进行实操。代码这种东西即使再简单，写过和没写过的体会也是不一样的。这个部分的代码使用"文本编辑器"就可以实践。具体操作请详见《》。
碎片化的知识其实对人并没有多大作用，但是我们的时间在现代化的生活节奏中被撕地越来越碎，因此我希望大家可以利用碎片时间来学习完整的知识，所以，以短篇的形式，每天20分钟左右，通过积少成多的办法为大家提供零基础页面制作的教程体系是我的主要目的。希望大家学有所成！
喜欢我的教程的小伙伴请关注我，点赞也会让我充满动力！
喜欢的小伙伴请关注和转发，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
相关文章
HTML表单元素初识2——零基础自学网页制作
表单元素属性2 昨天我们学习了《HTML表单元素初识1——零基础自学网页制作》（目录在结尾），大家通过学习对HTM...
第一个HTML页面如何写？——零基础自学网页制作
把txt文件变成html网页文件 如果您看过《HTML是什么？——零基础自学网页制作》（结尾处找“零基础自学网页制...
HTML表单元素初识1——零基础自学网页制作
表单元素初识 我们在浏览网页时会经常遇到注册会员的界面，大概像这个样子： 或填写问卷的情况，大概像这个样子： 我们...
# 使用HTML添加表格2（表格头部与脚部）——零基础自学网页制
添加表格头部信息与脚部信息 昨天我们在《使用HTML添加表格1（基本元素）——零基础自学网页制作》（文章结尾有目录...
初识meta标签与SEO——零基础自学网页制作
初识meta标签属性 如果您学习了《HTML页面中head标签有啥用？——零基础自学网页制作》这一篇教程，一定了解...
初识HTML中的
块元素——零基础自学网页制作块元素基础属性讲解 元素是个有故事的元素，这个元素很早就出现在html超文本标记语言中，它设计之初就是为...HTML元素中的属性2（路径详解）——零基础自学网页制作
相对路径与绝对路径的使用方法 在《HTML元素中的属性1——零基础自学网页制作》这一篇教程最后内容中，我们详细展示...
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
行颜色设置的简便方法 昨天我们在《使用HTML添加表格3（间距与颜色）——零基础自学网页制作》（目录在结尾）中学习...
为页面嵌入PDF文件——零基础自学网页制作
在页面中嵌入PDF文件 在上一篇《在html页面中嵌入其他页面的方法——零基础自学网页制作》（结尾见目录）中我们学...
HTML元素中的属性1——零基础自学网页制作
HTML元素的属性 属性是为HTML元素提供的附加信息。 为相同的HTML元素指定不同的属性，会呈现不同的功能或效...
本文标题：HTML表单元素初识2——零基础自学网页制作
本文链接：https://www.haomeiwen.com/subject/bfrwehtx.html
深度阅读
- 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！
网友评论