注 册 页 面 案 例 注册页面案例 注册页面案例
标签名 | 作用 | 备注 |
---|---|---|
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: </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 使用标签
- 简单布局,使用div标签
- 基本文本标签
- 表单标签
- 图片标签
5.4 实现步骤
- 设置背景图。
- 基本上下两部分布局。
- 实现上部(图片)
- 实现下部(表单)
- 实现页面跳转,从案例2跳转到案例3。