注册页面案例

$$注册页面案例$$

标签名	作用	备注
form	表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器

举例：

<form >
    //表单元素
</form>

表单的属性

属性名	作用	备注
action	处理此表单信息的Web服务器的URL地址
method	提交此表单信息到Web服务器的方式	可能的值有get和post，默认为get
autocomplete	自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用	HTML5

举例：

<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>

<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>

GET与POST说明：

post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。

get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。

GET与POST对比：

	地址栏可见	数据安全	数据大小
GET	可见	不安全	有限制（取决于浏览器）
POST	不可见	相对安全	无限制

5.2.2 表单元素入门

表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。

标签名	作用	备注
**label **	表单元素的说明，配合表单元素使用	for属性值为相关表单元素的id属性值
input	表单中输入控件，多种输入类型，用于接受来自用户数据	type属性值决定输入类型
button	页面中可点击的按钮，可以配合表单进行提交	type属性值决定按钮类型

1）简单的文本输入框

• label标签：表单的说明。

  • for属性值：匹配input标签的id属性值

• input标签：输入控件。

  • type属性：表示输入类型，text值为普通文本框
  • id属性：表示标签唯一标识
  • name属性：表示标签名称
  • value属性：表示标签数据值

代码实现：

<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
</form>

2）提交用户名的表单

• button标签：表示按钮。
  • type属性：表示按钮类型，submit值为提交按钮。

<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
  <button type="submit" >login</button>
</form>

5.2.3 关于属性值

1）NAME和VALUE属性

属性名	作用
name	<input>的名字，在提交整个表单数据时，可以用于区分属于不同<input>的值
value	这个<input>元素当前的值，允许用户通过页面输入

使用方式：

以name属性值作为键，value属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用&进行分隔。

举例：

2）TYPE属性

• input标签的type属性

  【建议】

  这是今天的重点讲解内容，type的值决定输入的类型

  • 基本的文本属性

  属性值	作用	备注
  text	单行文本字段
  password	单行文本字段，值被遮盖
  email	用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验	HTML5

  举例：

    <form action="#" method="get">
        <label for="username">Username:</label>
        <input type="text" id="username"  name="username"> <br/>
    
        <label for="password">Password:</label>
        <input type="password" id="password"  name="password"><br/>
    
        <label for="email">Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="email" id="email"  name="email"><br/>
        <button type="submit"> login</button>
    </form>
    
  

  • 单选多选属性

    属性值	作用
    radio	单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。
    checkbox	复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器

    举例：

    <form action="#" method="get">
        <label for="gender">性别:</label>
        <input type="radio" id="gender" name="gender" value="boy"/>男
        <input type="radio" name="gender" value="girl" checked="checked"/>女
    
        <hr/>
        <label for="hobby">爱好: </label>
        <input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育
        <input type="checkbox"  name="hobby" value="tech"/> 科技
        <input type="checkbox" name="hobby" value="fun" /> 娱乐
        <input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频
    </form>
    
    
    

  • 按钮属性

    属性值	作用
    button	无行为按钮，用于结合JavaScript实现自定义动态效果
    submit	提交按钮，用于提交表单数据。
    reset	重置按钮，用于将表单中内容恢复为默认值。
    image	图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。

  • HTML5新增的type值

    属性值	作用	备注
    date	HTML5 用于输入日期的控件	年，月，日，不包括时间
    time	HTML5 用于输入时间的控件	不含时区
    datetime-local	HTML5 用于输入日期时间的控件	不包含时区
    number	HTML5 用于输入浮点数的控件
    range	HTML5 用于输入不精确值控件	max-规定最大值 min-规定最小值 step-规定步进值 value-规定默认值
    search	HTML5 用于输入搜索字符串的单行文本字段	可以点击x清除内容
    tel	HTML5 用于输入电话号码的控件
    url	HTML5 用于编辑URL的字段	可以校验URL地址格式

属性值	作用	备注
file	此控件可以让用户选择文件，用于文件上传。	使用 accept 属性可以定义控件可以选择的文件类型。
hidden	此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值

• button标签的type属性

  属性值	作用	备注
  submit	此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。	同 <input type="submit"/>
  reset	此按钮重置所有组件为初始值。	同<input type="reset"/>
  button	此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。	同<input type="button"/>

3）HTML5新增属性

属性名	作用	备注
placeholder	提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。	仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。
required	这个属性指定用户在提交表单之前必须为该元素填充值	1. 布尔属性，可省略属性值表示true 2. 当type属性是hidden,image或者button类型时不可使用
autocomplete	自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。	1. 开启为on，关闭为off 2. 可以设置指定的字段为off，关闭自动补全

5.2.4 更多表单元素

标签名	作用	备注
**select **	表单的控件，下拉选项菜单	与option配合实用
optgroup	option的分组标签	与option配合实用
**option **	select的子标签，表示一个选项
textarea	表示多行纯文本编辑控件	rows表示行高度， cols表示列宽度
fieldset	用来对表单中的控制元素进行分组(也包括 label 元素)
legend	用于表示它的fieldset内容的标题。	fieldset 的子元素

select举例：

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<!--  
  select的name属性值与option的value属性值,构成键值对,提交到Web服务器
-->

textarea举例：

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

fieldset举例：

<form action="#" method="post">
  <fieldset>
    	<legend>是否同意</legend>
        <input type="radio" id="radio_y" name="agree" value="y"> 
      	<label for="radio_y">同意</label>
        <input type="radio" id="radio_n" name="agree" value="n"> 
      	<label for="radio_n">不同意</label>
  </fieldset>
</form>

5.3 使用标签

1. 简单布局，使用div标签
2. 基本文本标签
3. 表单标签
4. 图片标签

5.4 实现步骤

1. 设置背景图。
2. 基本上下两部分布局。
3. 实现上部（图片）
4. 实现下部（表单）
5. 实现页面跳转，从案例2跳转到案例3。