HTML5 + CSS3 3 表单

一.表单

表单：是搜集用户数据信息的各种表单元素的集合区域

作用：实现网页上的数据交互搜集客户端输入的数据信息，提交到网站服务器端进行处理

常见应用：

注册/登录
搜索
留言/评论
文件上传/文章编辑

结构：表单区域 + 表单控件（表单元素）

表单标签：<form></form>

块状元素
用来定义网页中的交互输入的区域（表单区）
所有的表单控件必需包含在<form></form>元素中

<form>基本属性：

属性	值	说明
action	url路径	必需。规定当提交表单时向何处发送表单数据
method	get/post	必需。规定用于发送form-data的HTTP方法。（get 小数据不加密）
name	自定义名称	规定表单名称（针对服务器端或脚本处理）

name属性和id属性的区别：

id在页面中具有唯一性，name可以重复
name主要对应服务器端，用于对提交到服务器后的表单数据进行标识。要实现数据交互功能，表单和表单控件都需要使用name属性
name的另一个功能是对应JavaScript，来处理表单中的各种数据值。id主要对应css样式应用

二.表单控件

表单控件类型：

1.输入型

文本框（单行文本） <input>标签创建文本框，type属性指定其具体类型（text password hidden：用户看不到，用于传递不需要显示在客户端的数据）

行间元素。
type属性定义表单控件的类型。
html5新增输入型控件。type值：url email number range date color search tel
value属性定义表单控件默认的值

文本域（多行文本）无value属性。 <textarea>这里是默认值</textarea>

2.选择型

*单选（组）/复选（组）。 <input>标签创建选择框，type属性指定其具体类型

单选按钮 <input type="radio">

单选按钮具有互斥性，必须成组出现
name属性：实现按钮的编组。
checked属性：设定按钮的已选中状态

2.复选按钮 <input type="checkbox">

可以单个使用，也可以成组使用
成组使用时，提供给用户一组可选项中做多项选择
value属性：值发送到数据库
下拉列表 <select></select>标签创建下拉列表区，<option></option>创建列表中的子级选项
应用技巧：

给<option></option>添加selected属性，设定默认选中状态
给<select></select>添加multiple属性，可选择多个选项
<select></select>的size属性可以规定下拉列表中可见选项的数目
使用<optgroup></optgroup>给列表中的选项进行分组，形成类似树形的分级选择控件。label属性用于定义选项组的文本描述

html5新增选择型控件

输入提示控件：datalist（预先定义一个输入框的潜在选项，为输入框提供一个可选择的提示列表。用户输入时，可直接选择提示列表）
datalist和input关系：

datalist作为输入提示，需要和input搭配使用
使用input（输入框）的list属性来引用datalist的id值

<input list="browser">
<datalist id="browser">
     <option></option>
     <option></option>
     <option></option>
</datalist>

datalist缺陷：无法使用css进行UI设计或样式设定

3.事件型

<input type="button" value="普通按钮">

/* 普通按钮 点击触发事件，通过脚本语言完成 */

<input type="submit">             /* 提交按钮 点击按钮会把表单数据发送到服务器 */

<input type="reset">           /* 重置按钮 点击按钮会重置表单中所有数据 */

<input type="image" src="" alt="替代文本">   /* 图像按钮 用自定义图像来呈现提交按钮 */

<input type="file" multiple>

/* 上传按钮 点击按钮选择本地文件，上传文件 */

<button type=""></button>          /*按钮控件。文本可用value设置*/

三.表单/表单控件常用的属性总结

value属性：

定义各种表单控件的值
不同控件类型，value用法也不同

	应用对象	说明
value	输入型	定义初始值
	选择型	定义相关联的值
	事件型	定义按钮呈现的值

readonly只读属性 ：<input readonly>

可以提交

disabled禁用属性 ：<input disabled>

不可提交

placeholder占位符属性 ：<input placeholder="text"> （h5新增属性）

规定可描述输入字段预期值的提示信息，来提示用户输入
文本内容在用户输入时自动消失
针对输入型表单控件。如input textarea
不会被表单提交

required必填属性 ：<input required> （h5新增属性）

autofocus自动获得焦点属性 ：<input autofocus> （h5新增属性）

页面加载时<input>元素自动获得焦点

autocomplete自动完成属性 ：<input autocomplete="on">

值：

on适用于表单（默认，开启）当用户在字段开始键入时，浏览器根据之前键入的值，应显示出在字段中填写的选项。
off使用与特定的输入字段（关闭）

四.表单应用技巧

1.使用<label></label>提高用户操作交互体验

行间元素
为表单控件提供辅助标记。点击<label></label>中的标记内容，浏览器会自动将焦点转到和label相关的表单控件上
应用：

用 label 将标记内容和表单控件括在一起，增加控件的可操作性 <label> 标记内容 + 表单控件 </label>
使用 for 属性将其和相关控件连在一起，for属性的值为控件的id名

<label>
    hello
    <input type="checkbox" id="hello">
</label>
<p>world</p>
<p>world</p>
<p>world</p>
<label for="hello">选择是否同意</label>

2.使用<fieldset></fieldset>协助表单控件或数据归类分组分组标签

块状元素，创建一个分组区域
分组标题标签：<legend></legend> 。块状元素。用来为fieldset分组定义一个标题，作为表单内容的说明或描述

<fieldset>
    <legend>表单描述</legend>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</fieldset>

五.css样式及登录界面实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: rgba(87, 167, 211, 0.51);
            color:#111;
        }
        #userlogin{
            width: 300px;
            background: #fff;
            margin: 30px auto;
            padding: 25px;
        }
        #userlogin h3{
            font-size: 16px;
            line-height: 32px;
            margin-bottom: 20px;
            font-weight: bold;
        }
        #userlogin p{
            margin-bottom: 25px;
        }
        .input-text{
            border: 1px solid #ccc;
            height: 38px;
            width: 248px;
            font-size: 14px;
            float: left;
            margin-top: -38px;
            padding-left: 50px;
        }
        .glyphicon-user,.glyphicon-lock{
            display: inline-block;
            width: 38px;
            height: 38px;
            color: grey;
            background-color: rgba(193, 193, 193, 0.7);
            text-align: center;
            line-height: 41px;
            font-size: 18px;
        }
        .input-btn{
            width: 248px;
            height: 40px;
            border: 0;
            background-color: #9A0002;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 5px;
            border-radius: 3px;
        }
        .input-btn:hover{
            background-color: #D10003;
            cursor: pointer;/*规定显示的光标的类型*/
        }
        h6{
            text-align: right;
        }
        h6 a{
            color: #666;
            text-decoration: none;
            font-weight: normal;
            margin-right: 12px;
        }
        h6 a:hover{
            color: #C81D1F;
        }
    </style>
</head>
<body>
<form action="#" method="post" name="userlogin" id="userlogin">
    <h3>用户登录</h3>
    <div>
        <p><div class="glyphicon glyphicon-user"></div><input class="input-text" type="text" placeholder="手机号/会员名/邮箱" autofocus required></p>
        <p><div class="glyphicon glyphicon-lock"></div><input class="input-text input-pwd" type="password" required placeholder="密码"></p>
    </div>
    <p><input class="input-btn" type="submit" value="登录"></p>
    <h6>
        <a href="#">忘记密码</a>
        <a href="#">免费注册</a>
    </h6>
</form>
</body>
</html>

cursor属性值：

url 自定义光标
default 默认光标（箭头）
auto 默认（浏览器设置的光标）
crosshair 十字线
pointer 手形
move 指示目标可移动
e-resize 指示矩形框边缘可被向东移动 east
ne-resize northeast
nw-resize northwest
n-resize north
se-resize southeast
sw-resize southwest
s-resize south
w-resize west
text 指示文本
wait 指示程序正忙
help 指示帮助

一.表单

二.表单控件

三.表单/表单控件常用的属性总结

四.表单应用技巧

五.css样式及登录界面实例

猜你喜欢