HTML表单元素初识2——零基础自学网页制作

为了不再被疑似涉嫌低俗&＃xff0c;我只能给大家提供这种图片了&＃xff0c;耐得住寂寞才能学有所成&＃xff01;吸引人的东西未必珍贵。

昨天我们学习了《HTML表单元素初识1——零基础自学网页制作》&＃xff08;目录在结尾&＃xff09;&＃xff0c;大家通过学习对HTML页面中的表单元素的基本写法已经非常熟悉了。同时也学会了通过变换标签中的type属性的值为表单赋予不同的功能&＃xff0c;例如输入文本和建立多选表单。期间&＃xff0c;对name与value这两个属性的作用与特点进行了阐释。今天我们继续学习新的表单内容。

**建立单选表单&＃xff1a;**单选表单把标签的type属性修改为"radio"&＃xff08;收音机&＃xff09;&＃xff0c;为什么单选表单使用"收音机"这个词呢&＃xff1f;其实道理很简单&＃xff0c;收音机调频旋钮是对应角度对应相应调频&＃xff0c;不可能一个角度对应两个调频&＃xff0c;所以选这个就不能选其他的表单中的type属性使用"radio"这个词表示&＃xff0c;是不是很形象。

示例代码如下&＃xff1a;

最高学历&＃xff1a;
高中本科硕士博士




因为描写的是最高学历&＃xff0c;一般人最高学历只有一个&＃xff0c;不可能又是学士又是博士&＃xff0c;因此使用单选表单。

向服务器提交时&＃xff0c;name叫做"education"&＃xff08;教育&＃xff09;&＃xff0c;value对应不同层次。

页面效果如下&＃xff1a;

大家可以点点试试&＃xff0c;每次只能有一个被选中。如图&＃xff1a;

**综合练习&＃xff1a;**到这为止&＃xff0c;我们把之前零散的代码拼凑一下看看效果吧&＃xff01;

会员名称&＃xff1a;
会员密码&＃xff1a;
确认密码&＃xff1a;



页面效果如下&＃xff1a;

密码输入&＃xff1a;我们在使用上述表单输入密码时发现&＃xff0c;密码时实时显示在输入框中&＃xff0c;这一点是不安全的&＃xff0c;如图&＃xff1a;

如何让密码隐藏呢&＃xff1f;其实看过上一篇中type属性列表的小伙伴肯定猜到了&＃xff0c;把type从"text"改为password。示例代码如下&＃xff1a;

会员密码&＃xff1a;


确认密码&＃xff1a;




页面效果如下&＃xff1a;

**上传文件&＃xff1a;**使用type&＃61;"file"可以上传文件&＃xff01;

示例代码如下&＃xff1a;写在"submit"的上面即可。

页面效果如下&＃xff1a;

点击"浏览"看下效果&＃xff1a;

神奇&＃xff01;

使用图片制作按钮&＃xff1a;将type&＃61;"image"即可&＃xff0c;代码如下&＃xff1a;

页面效果如下&＃xff1a;用一个src导入图片即可。

示例图片&＃xff1a;路径自行设置即可&＃xff01;

为表单设置一个重置按钮&＃xff1a;如果用户打算重置表单内容后从新填写&＃xff0c;我们可以给他这样一个按钮&＃xff1a;

页面如图所示&＃xff1a;

大家要注意的是这个"重置"按钮的作用范围仅仅是它所在的标签之间&＃xff01;

举个例子&＃xff0c;如图&＃xff1a;

下面我们点击"重置"后效果如下&＃xff1a;

form1中的内容没有被清空&＃xff0c;"重置"按钮所在的form2内容被清空了&＃xff01;

type属性值讲解我们到此结束了&＃xff0c;hidden值这里先不给大家介绍&＃xff0c;以后有机会再细说。

button值以后在Javascript部分还会细说&＃xff0c;这里也先略过。

除了外&＃xff0c;还有其他一些标签&＃xff0c;例如或</code>等有趣且实用的标签&＃xff0c;我们明天再学习吧&＃xff01;</p><p>今天的内容先到这里。希望大家看完之后可以写写代码进行实操。代码这种东西即使再简单&＃xff0c;写过和没写过的体会也是不一样的。这个部分的代码使用"文本编辑器"就可以实践。具体操作请详见《》。</p><p>碎片化的知识其实对人并没有多大作用&＃xff0c;但是我们的时间在现代化的生活节奏中被撕地越来越碎&＃xff0c;因此我希望大家可以利用碎片时间来学习完整的知识&＃xff0c;所以&＃xff0c;以短篇的形式&＃xff0c;每天20分钟左右&＃xff0c;通过积少成多的办法为大家提供零基础页面制作的教程体系是我的主要目的。希望大家学有所成&＃xff01;</p><p>喜欢我的教程的小伙伴请关注我&＃xff0c;点赞也会让我充满动力&＃xff01;</p><p>喜欢的小伙伴请关注和转发&＃xff0c;阅读中遇到任何问题请给我留言</p><p>专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节&＃xff0c;互相交流学习&＃xff0c;不停更新最新的教程和学习技巧&＃xff08;网页制作&＃xff0c;网站开发&＃xff0c;web开发&＃xff0c;从0基础开始的的HTML&＃43;CSS&＃43;Javascript。jQuery&＃xff0c;Ajax&＃xff0c;node&＃xff0c;angular框架等到移动端HTML5的项目实战【视频&＃xff0b;工具&＃xff0b;系统路线图】全栈工程师学习路线以及规划都有整理&＃xff0c;分享给小伙伴&＃xff09;点&＃xff1a;<strong>学习前端&＃xff0c;我们是认真的</strong></p></div></div> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> <li><a href="https://www.php1.cn/tag/图片" target="_blank" title="图片">图片</a></li> <li><a href="https://www.php1.cn/tag/input" target="_blank" title="input">input</a></li> <li><a href="https://www.php1.cn/tag/io" target="_blank" title="io">io</a></li> <li><a href="https://www.php1.cn/tag/服务器" target="_blank" title="服务器">服务器</a></li> <li><a href="https://www.php1.cn/tag/text" target="_blank" title="text">text</a></li> <li><a href="https://www.php1.cn/tag/checkbox" target="_blank" title="checkbox">checkbox</a></li> <li><a href="https://www.php1.cn/tag/int" target="_blank" title="int">int</a></li> <li><a href="https://www.php1.cn/tag/安全" target="_blank" title="安全">安全</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了

会员登录 | 用户注册