HTML表单元素初识2——零基础自学网页制作
gaoyangw 2024-11-13 10:35 23 浏览 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属性）——零基础自学网页制作
相关推荐
- 百付科技智能拓客解决方案:搜索优化与搜索竞价的协同增长
-
百付科技通过“智能拓客+搜索优化”的深度协同，构建“DeepSeek技术占位+百度竞价引流+内容搜索沉淀”的全域营销闭环，帮助企业在搜索生态中实现从“流量获取”到“用户资产...
- 百度搜索10年来最大改版 搜索框、结果页、生态全面革新
-
7月2日，百度集团股份有限公司（以下简称“百度”）旗下百度搜索宣布进行十年来最大改版，从搜索框、搜索结果页到搜索生态全面革新。最直接的变化是经典的百度搜索框变大，成为“智能框”。原本只支持几十个字的搜...
- 百度搜索10年来最大改版，首次支持超千字文本输入
-
IT之家7月2日消息，在今日的百度AIDay开放日上，百度搜索宣布进行10年来最大改版。百度搜索框升级为“智能框”，支持超千字的文本输入，拍照、语音、视频等能力也全面加强，支持直接调...
- 百度搜索10年来最大改版:推出智能框、升级AI助手
-
7月2日，百度搜索宣布进行十年来最大改版，从搜索框、搜索结果页到搜索生态均有变化。百度搜索框变为“智能框”，支持超千字的文本输入，以及拍照、语音、视频等，还可以直接调取AI写作、AI作图等工具。最直接...
- 深入解析Go测试并行性优化:为何多核CPU无法加速你的测试?
-
一、问题背景：理论与现实的差距最近在优化某项目API测试时，遇到一个反直觉的现象：理论预期：设计为完全并行的测试套件，总耗时应接近最长单测用时实际表现：总耗时是最慢单测的7倍，CPU利用率始终低于50...
- 电脑C盘满了怎么清理?推荐几款靠谱的C盘清理软件
-
电脑c盘满了之后就会导致运行缓慢，而且还会影响到使用体验，到底应该如何来清理呢？今天就为大家来详细的介绍一下，并且推荐几个比较靠谱的c盘清理软件。等到c盘空间不足时，可以选择系统自带的磁盘清理工具。...
- NGINX 性能优化与高级配置:榨干服务器潜能，打造极致体验
-
NGINX以其卓越的性能和高并发处理能力闻名于世，但默认配置往往只是一个普适性的起点。要想真正发挥NGINX的潜能，满足日益增长的业务需求，深入理解其配置并进行精细化调优至关重要。这就像拥有一辆...
- 清理大师拖慢你的电脑?系统优化软件的黑历史你了解吗?
-
你是不是也用过“清理大师”“加速助手”这类软件？它们看起来能释放内存、优化系统，其实很可能反而拖慢了你的电脑。别再中招了，本篇告诉你它们到底在干什么，如何真正提升性能。...
- 游戏修复工具在手，游戏流畅度翻倍!
-
分享四款实用的修复工具，可以帮助不同需求的玩家解决游戏运行故障。1、通过『迅捷DLL修复助手』修复游戏...
- 网络曝光有哪些渠道?为什么好多事情曝光了才会处理!
-
网络曝光有哪些渠道？为什么好多事情曝光了才会处理！社交平台发布：利用微博、微信朋友圈、百度贴吧等社交平台发布相关信息。这些平台用户基数大，传播速度快，是曝光事件的有效渠道。专业媒体联系：如果事件影响较...
- 工业品网络营销/工业品网络推广如何避免价格战?
-
工业品网络营销/工业品网络推广如何避免价格战？产能过剩，现在行业竞争越来越卷了，客户动不动就比价格，有没有同感的老板呢？今天我用我们16年的工业品网络营销的经验，告诉你：好产品就该卖出他该有的价格。很...
- 科普宣传丨暴雨多发季节，这些防汛安全知识请牢记
-
【来源：桦甸发布】雨季来临时常都会出现暴雨大风等天气泥石流、滑坡等情况也时有发生给我们的日常生活带来一些安全隐患那么在防汛期间出行安全有哪些需要注意的地方呢？遇到暴雨怎么办呢？来源：网络综合编辑：高...
- 黄前镇开展“网络同心 文明同行”主题宣传活动
-
岱岳融媒讯：...
- 新闻稿如何发布效果好?新闻推广的重点与难点有哪些?
-
新闻推广是现代社会中不可或缺的一环。随着信息时代的到来，新闻如闪电般迅速传播，通过推广新闻可以让更多人了解并关注相关事件观点和产品。然而如何做到有效的新闻推广却是一个复杂而具有挑战性的过程。开明网络营...
- 百付科技百度营销全攻略:从百度 SEO 到百度一下首页的流量密码
-
在百度生态流量竞争白热化的2025年，百付科技以“百度SEO+纳米AI搜索”为核心，为企业提供从技术优化到商业转化的百度营销全案，助力抢占百度一下首页流量高地。一、百度营销的双轨策略...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 百度收录 (50)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 手机网站建设 (53)
- 网站维护 (53)
- 网页制作教程 (66)
- 百度收录批量查询工具 (48)
- 网站服务器 (53)
- 学生个人网页制作html (56)
- 一键优化 (67)
- 网页制作软件 (49)