注 册 页 面 案 例 注册页面案例 注册页面案例

标签名 作用 备注
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。