HTML表单元素初识2——零基础自学网页制作
gaoyangw 2024-11-13 10:35 16 浏览 0 评论
表单元素属性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对应不同层次。
页面效果如下：
大家可以点点试试，每次只能有一个被选中。如图：
综合练习：到这为止，我们把之前零散的代码拼凑一下看看效果吧！
<!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添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
相关推荐
- 网络推广引流策略:选准平台提升品牌影响力
-
网络推广引流是企业和个人自媒体发展中不可或缺的关键步骤，它能有效提升品牌名声、促进产品销售、吸引众多潜在消费者。为了做好这项工作，我们需深入了解众多细节和策略。下面，我将逐一为大家详细介绍网络推广引流...
- 王心凌翻红，南京某公司专门发文为其拉票?
-
前不久，“刘耕宏女孩”们纷纷加入健身大军，一起跳起了《本草纲目》。最近，“王心凌男孩”们又跳起了《爱你》，登上热搜。一首《爱你》重新翻红5月20日，《乘风破浪3》开播。今年39岁的王心凌在初舞台上，绑...
- 项目招标山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公
-
项目招标山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商
- 关于山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告
-
关于山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告
- 最新项目山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商
-
最新项目山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告
- 山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商
-
山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商...
- 山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告
-
山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告...
- 最新公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商
-
最新公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告...
- 最新招标公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性
-
最新招标公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告
- 最新公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公
-
最新公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告...
- 合肥网站建设大概流程是怎么样的（合肥网站建设方案开发）
-
合肥网站建设是指在合肥地区进行网站建设的一系列流程和步骤。随着互联网的快速发展,网络在经济、商务、政府、教育和其他领域的作用越来越大,一个高效、安全、易用的网站在合肥的发展中起着重要的作用。下面将简要...
- 网站SEO优化如何制定策略（网站seo的主要优化内容）
-
原文地址：网站SEO优化如何制定策略作者：怎么可以那么难取名字做网站优化首先需要制定好SEO策略,SEO策略贯穿整个SEO工作中心，每一步都是按照这个策略走，循序渐进，一步一步进行。执行SEO之前一定...
- 2025年Google SEO趋势:AI如何重塑你的流量策略?
-
2025年，GoogleSEO正迎来一场由AI驱动的革命。作为一名拥有16年经验的SEO专家，我见证了无数网站因未能适应变化而流量暴跌，也看到那些紧跟趋势的网站实现逆袭。AI如何影响SEO？Goog...
- 网站建设费用包含哪些方面?（网站建设费用计入哪个科目）
-
在网站建设中，费用通常由多个方面组成，这些因素共同决定了网站的整体成本。首先，最基本的费用是域名和主机的购买。域名是网站的地址，而主机则是存放网站内容的服务器，这两者都是网站上线的必要条件。选择合适的...
- 做一个公司官网大概多少钱呢?（做一个公司官网大概多少钱呢知乎）
-
制作公司官网的费用因需求复杂度和服务商不同差异较大，以下是一个大致的费用范围和分析，供参考：#公司官网##网站搭建---**一、影响价格的核心因素**1.**网站类型**-**基础展示型**（5...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 网站开发 (47)
- 网络推广哪个平台好 (47)
- 百度收录 (50)
- 网页设计 (44)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 广州seo (47)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 网页制作 (47)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站收录查询 (46)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 网站设计模板 (45)
- 一键优化 (47)