bilibili注册页面html简单分析

Form部分(html部分有省略)

昵称栏

<input name="uname" value="昵称(例:哔哩哔哩)" type="text">

属性 描述
name 定义 input 元素的名称
value 规定 input 元素的值
type 规定 input 元素的类型

因昵称可以输入任意汉字,字母,数字的组合,所以选text类型最为恰当

密码

<input name="userpwd" placeholder="密码(6-16个字符组成,区分大小写)" type="password">

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。(HTML5中的属性)

因是输入密码,所以选择password类型。

地区选择
<select name="country_code" id="country_code">           
              <option value="1" >中国大陆</option>                      
              <option value="2" code="853">澳门特别行政区</option>            
              <option value="3" code="886">台湾地区</option>     
              <option value="4" code="1">美国</option>       
              <option value="5" code="852">香港特别行政区</option>
              ...
</select>
属性 描述
name 规定下拉列表的名称
value 定义送往服务器的选项值

select 元素是一种表单控件,可用于在表单中接受用户输入。
option 元素定义下拉列表中的一个选项(一个条目)。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部。

option只能与select 元素配合使用此标签,否则这个标签是没有意义的。

手机栏

<input name="tel" value="填写常用手机号" type="text">

手机验证码

<input name="code" value="手机验证码" type="text">

同意用户协议
<label>
     <input name="agree" id="agree" value="1" type="checkbox">我已同意
     <a target="_blank" href="/register/licence">
     《哔哩哔哩弹幕网用户使用   协议》</a>和
     <a target="_blank" href="http://www.bilibili.com/html/help.html#q">
       《哔哩哔哩弹幕网账号中心规范》</a>
</label>
  • <label> 标签为 input 元素定义标注(标记)。
  • label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
  • <label> 标签的 for 属性应当与相关元素的 id 属性相同。
    此处把一个input标签和两个a标签都包裹在了label标签中,省略了label的for属性,方便的实现了label与input和a的关联。
    checkbox为复选框类型,可以实现多个选择。当有多个checkbox时,可通过相同的name属性,规定为一组。value的值为传送到服务器的数据。
注册按钮

<input value="注册" type="submit">

submit类型为提交表单。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 921评论 0 1
  • 一种思念 文/不许(许松青) 一种思念 未经允许 从未抵达 一种澎湃 冲破边际 无处是岸 一种聚散 没有理由 亘古...
    治愈姐姐许松青阅读 617评论 0 4
  • 今天中午学生就放寒假了!正月十七开学。 家长一定要帮助学生制定好假期学习计划。我给大家提几点建议: 首先思想上这一...
    真好简单阅读 330评论 0 0