制作一个产品登录页
Willem Zhang Lv5

需求

需求 1: 产品登陆页应存在 id=”header” 的 header 元素。

需求 2: 在 header 元素内应存在 id=”header-img” 的图像, 这里通常用来放置公司的 logo。

需求 3: 在 #header 元素内,应存在一个 id=”nav-bar” 的 nav 元素。

需求 6: 页面上应存在 id=”video” 的嵌入式视频播放区域。

需求 7: 产品登陆页应存在一个 id=”form” 的 form 元素。

需求 8: 在表单中,应存在一个 id=”email” 的 input 输入框供用户填写邮箱。

需求 9: #email 输入框内应存在描述该区域用途的占位符文字。

需求 10: #email 输入框应使用 HTML5 验证来确认输入的内容是否为邮箱。

需求 11: 在表单中,应存在一个 id=”submit” 的 input 提交按钮。

需求 12: 当点击 #submit 元素时,应将邮箱信息提交到一个静态页面(请使用这个模拟的 URL:https://www.freecodecamp.com/email-submit)。

需求 13: navbar 应保持在视口(viewport)的顶部。

需求 14: 在此 app 中,应至少使用一次媒体查询。

需求 15: 在此 app 中,应至少使用一次 CSS 的 flexbox 布局。

解决:

需求4:

a标签 href=”#some-text”

需求6:

需求11:

1
<input id="submit" type="submit">

需求12:

input标签name与value的区别
id是唯一标识符,不允许有重复值(类似数据表的主键)可以通过它的值来获得对应的html标签对象。(如果在同一页面代码中,出现重复的id,会导致不可预料的错误)

name:单独地在一个网页里面,一个控件是否设置它的 name 属性是不会影响到这个网页的功能实现的。但是,当我们需要把这个控件所关联的数据传递到数据库时,就必须要设置 name 属性,否则,这个值是没有办法传到服务器上面得到保存的。
name是控件的名称 ,value是控件的值, id是控件的身份标志。

三者的区别:
name:控件名称
value:用户输入(或选择)的值
id:用于网页脚本编号(javascript)

CSDN链接

一句话总结:在input标签输入name属性才能将数据提交到服务器

链接:

codepen

  • Post title:制作一个产品登录页
  • Post author:Willem Zhang
  • Create time:2021-03-29 01:26:39
  • Post link:https://ataraxia.top/2021/03/28/制作一个产品登录页/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments