前端作业(一)——我在《世纪佳缘注册页面》作业中遇到的问题

今天老师在课堂上布置了一道作业——世纪佳缘注册的静态页面，用基本的html与css知识写出来。所以我就照着老师给出的页面敲出来了。基本的代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例-注册页面</title><style>.pink {color: pink;}</style>
</head><body><h4 class="pink" align="center">青春不常在，抓紧谈恋爱</h4><table width="500" align="center"><!-- 第一行 --><tr><td>性别:</td><td><input type="radio" name="sex" id="nan"> <label for="nan"><img src="data:images/man.jpg"> 男</label><input type="radio" name="sex" id="nv"> <label for="nv"><img src="data:images/women.jpg"> 女</label></td></tr><!-- 第二行 --><tr><td>生日:</td><td><select><option>--请选择年份--</option><option>2001</option><option>2002</option><option>2003</option></select><select><option>--请选择月份--</option><option>1</option><option>2</option><option>3</option></select><select><option>--请选择日--</option><option>1</option><option>2</option><option>3</option></select></td></tr><!-- 第三行 --><tr><td>所在地区</td><td><input type="text" value="北京你好"></td></tr><!-- 第四行 --><tr><td>婚姻状况</td><td><input type="radio" name="marry" id="marry"> <label for="marry"> 未婚</label><input type="radio" name="marry" id="marry"> <label for="marry"> 已婚</label><input type="radio" name="marry" id="marry"> <label for="marry"> 离婚</label></td></tr><!-- 第五行 --><tr><td>学历:</td><td><input type="text" value="幼儿园"></td></tr><!-- 月薪 --><tr><td>月薪</td><td><input type="text" value="10000-20000"></td><!-- 手机号码 --><tr><td>手机号码</td><td><input type="text"></td></tr><!-- 昵称 --><tr><td>昵称</td><td><input type="text"></td></tr></tr><!-- 第六行 --><tr><td>喜欢的类型:</td><td><input type="checkbox" name="love"> 妩媚的<input type="checkbox" name="love"> 可爱的<input type="checkbox" name="love"> 小鲜肉<input type="checkbox" name="love"> 老腊肉<input type="checkbox" name="love" checked="checked"> 都喜欢</td></tr><!-- 第七行 --><tr><td>自我介绍</td><td><textarea>自我介绍</textarea></td></tr><!-- 第八行 --><tr><td></td><td><input value="免费注册" type="image" src="data:images/btn.png"/> </td></tr><!-- 第九行 --><tr><td></td><td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td></tr><!-- 第十行 --><tr><td></td><td><a href="#"> 我是会员，立即登录</a></td></tr><!-- 第十一行 --><tr><td></td><td><h5>我承诺</h5><ul><li>年满18岁，单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul></td></tr></table>
</body>

运行之后就是这个样子了，和老师的基本一样

问题就来了，我不明白的是老师说单选按钮和复选按钮的name属性的值必须要一样。单选按钮不一样就会多选，然后还在课上演示了一下，确实是那样。而我又在课下实验了一下，单选按钮的name值如果不一样，就产生了和复选按钮一样可以实现多选，而复选按钮没有或者name值都一样它都可以实现多选，所以老师并没有说明白，说的太片面了。name值的作用肯定不是这样的，所以我在网上搜了大量的资料，才发现了其中的奥秘：通过学习我们知道<input>表单元素用于输入用户信息，而name和value属性用于给后台人员使用。说到这，我不得不说由于我们知识有限，后台需要用到php，java,js的知识，而且我们还没有接触到后端和服务器，所以不知道name属性到底是怎么工作的，这是我们小白学习前端可能都会遇到的问题，博主就被这个问题困扰了好多天。今天我把我通过在网上看到的以及我的理解说给大家听，我认为name属性的作用就相当于人的名字一样，用来区分一个人的，所以name值相同的单选按钮或复选按钮属于同一个组，不同的name值的单选或复选按钮属于不同的组，这样后台就好区分用户选的是哪一个组的哪一个了，所以说同一个组的单选或复选按钮name值必须一样，这样理解确实就说的通了。而网上大部分的解释都是千篇一律，很片面的，没有说清楚。包括我可能也说的也不对，说的也不清楚，但仅代表我个人的想法，因为博主也没学习到后端的知识，或许学习到后端的知识，这些问题也就迎刃而解了吧！

如果有大佬看到这篇文章，欢迎指正，希望有更多的小伙伴们向我提出错误。

前端作业(一)——我在《世纪佳缘注册页面》作业中遇到的问题相关推荐

html_5_小作业2_世纪佳缘注册页面
文章目录要求效果代码要求效果源码: 链接:https://pan.baidu.com/s/1Cnf2koBFo4I4CCW4RTQ_4A 提取码:ouzc 代码 <!DOCTYPE ...
世纪佳缘财务及运营数据分析
世纪佳缘成立于2003年10月8日,是中国在线婚恋交友平台,通过互联网.无线平台和线下活动为单身人士提供严肃婚恋交友服务.2011年5月11日,世纪佳缘登陆美国纳斯达克进行首次公开募股,成为首家上市的 ...
操作元素总结及作业1——世纪佳缘登录案例-黑马pink老师
在黑马前端教程里面,操作元素部分有这样一个案例就是世纪佳缘的登陆案例. 实现:登录的隐藏内容,以及密码框的设计,点击后颜色的变化. 简单的算法:利用JS操作元素.事件以及if分支,修改表单获取焦点和失 ...
JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1
需求:利用JS事件与操作元素复刻--世纪佳缘(用户名.显示隐藏内容). 开发环境:VScode.Edge 参考网站:世纪佳缘官网注册截面头部包含算法: 1.利用JS操作元素.事件以及if分支,修改表 ...
用Html实现世纪佳缘交友注册页面是什么体验？
一.前言在零基础必看的Html5+Css3+移动端前端视频教程(三)中主要学习了表格.列表.表单标签的使用,那这篇博客就利用这些知识,实现注册页面. 二.分析页面布局这是世纪佳缘的官网,目前只凭借 ...
node爬虫实践：爬取世纪佳缘交友信息
自从node这一运行在服务端的 JavaScript横空出世以后,赋予了前端开发工程师强大的力量.文件I/O操作,连数据库写接口接口等等.我在刚开始学习的node的时候,尝试着爬了一个比较小的相亲网站 ...
python是一种面向对象的高级语言_爬了世纪佳缘后发现了一个秘密，世纪佳缘找对象靠谱吗？...
今天在知乎上看到一个关于[世纪佳缘找对象靠谱吗?]的讨论,其中关注的人有 1903,被浏览了 1940753 次,355 个回答中大多数都是不靠谱.用 Python 爬取世纪佳缘的数据是否能证明它的不 ...
杨鹏谈世纪佳缘推荐算法：基于Spark GraphX，弃GBDT和LR用FM
杨鹏谈世纪佳缘推荐算法:基于Spark GraphX,弃GBDT和LR用FM 发表于2015-09-30 09:53| 1447次阅读| 来源CSDN| 2 条评论| 作者杨鹏机器学习推荐算法 ...
世纪佳缘，玫瑰和面包开始PK
你在桥上看风景看风景人在楼上看你明月装饰了你的窗子你装饰了别人的梦 ----卞之琳<断章> 喜欢卞之琳这首诗的意境和韵味,如同一幅水墨画,淡雅,清新,悠远. ...
三天花三万！跟董事长女儿相亲却被骗财？世纪佳缘致歉杭州小吴并承诺赔偿...
时隔一个多月,世纪佳缘在官方微博回应了"杭州小吴相亲"事件.世纪佳缘称,公司服务部对该事件负有不可推卸的责任,经双方协商,服务吴先生的门店负责人将亲自上门致歉,并按服务合同金额进行 ...

前端作业(一)——我在《世纪佳缘注册页面》作业中遇到的问题

前端作业(一)——我在《世纪佳缘注册页面》作业中遇到的问题相关推荐

最新文章

热门文章