htmlcss个人网站网页制作(htmlcss简单的网页制作)

2024-04-16    分类： 网站建设

表单元素属性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是什么？——零基础自学网页制作

第一个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>标签实现文本内链接——零基础自学网页制作

网站名称：htmlcss个人网站网页制作(htmlcss简单的网页制作)
网站地址：https://www.cdcxhl.com/news34/323834.html

成都网站建设公司_创新互联，为您提供虚拟主机、面包屑导航、软件开发、网站设计公司、微信公众号、域名注册

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

营销型网站建设

网站建设知识

同城分类信息