20180614-前端系统学习-HTML之表单元素

1. 表单使用

使用过程：构建表单->配置表单->验证表单->服务器处理

①构建表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <h2>披萨预定表单</h2>
    <form>
        <div><label>姓名：<input></label></div>
        <div><label>电话：<input type="tel"></label></div>
        <div><label>邮箱：<input type="email"></label></div>
        <fieldset>
            <legend>披萨大小</legend>
            <label><input type="radio" name="size">小</label>
            <label><input type="radio" name="size">中</label>
            <label><input type="radio" name="size">大</label>
        </fieldset>
        <fieldset>
                <legend>披萨配料</legend>
                <label><input type="checkbox">熏肉</label>
                <label><input type="checkbox">奶酪</label>
                <label><input type="checkbox">洋葱</label>
                <label><input type="checkbox">蘑菇</label>
        </fieldset>
        <div><label>配送时间：<input type="time" min="11:00" max="21:00" step="900"></label></div> <!--900代表步进时间是900秒，即15分钟-->
        <div><button>提交订单</button></div>
    </form>
</body>
</html>

②服务器处理接口

服务器需要用到的数据信息的结构，如：

https://pizza.test.com/order 请求地址
application/x-www-form-unlencoded 请求的数据类型，数据提交到服务器之后的编码方式
custname,custtel,custemail,size,topping,delivery 需要提交的字段

③配置表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <h2>披萨预定表单</h2>
    <form method="POST" enctype="application/x-www-form-urlencoded" action="https://pizza.test.com/order">
        <div><label>姓名：<input name="custname"></label></div>
        <div><label>电话：<input type="tel" name="custtel"></label></div>
        <div><label>邮箱：<input type="email" name="custemail"></label></div>
        <fieldset>
            <legend>披萨大小</legend>
            <label><input type="radio" name="size" value="small">小</label>
            <label><input type="radio" name="size" value="medium">中</label>
            <label><input type="radio" name="size" value="large">大</label>
        </fieldset>
        <fieldset>
                <legend>披萨配料</legend>
                <label><input type="checkbox" name="topping" value="bacon">熏肉</label>
                <label><input type="checkbox" name="topping" value="cheese">奶酪</label>
                <label><input type="checkbox" name="topping" value="onion">洋葱</label>
                <label><input type="checkbox" name="topping" value="mushroom">蘑菇</label>
        </fieldset>
        <div><label>配送时间：<input type="time" min="11:00" max="21:00" step="900" name="delivery"></label></div> <!--900代表步进时间是900秒，即15分钟-->
        <div><button>提交订单</button></div>
    </form>
</body>
</html>

④验证表单

<div><label>姓名：<input name="custname" required></label></div>

2. 表单控件

form

表单关联控件的集合
禁止表单嵌套（不能嵌套）

label

表单控件的标题

有两种关联方式：

① 普通关联。这种情况点击输入框才会被激活。

<label>姓名：<input name="custname"></label>

② 利用for属性指定id进行关联，这种情况点击文字即可激活输入。如下输入框和文字进行了关联。

<label for="custname">姓名：</label><input name="custname" id="custname">

select

列表选择器（单选、多选、可控显示菜单数量）

选择分组（optgroup）

禁用状态（disabled、选择器禁用，选项禁用，选项组禁用）

datalist

为表单控件预定义的选项集合（不支持datalist可以退化成用选择器）

option

选项，可以内嵌在select，datalist，optgroup元素里

select下的option（既不设置label值也不设置中间的文字，选项就会为空）

datalist下的option

textarea

多行文本输入控件
内容中的</textarea>转义

progress

任务进度信息控件
进度模式（确定进度、不确定进度）

meter

度量信息控件

展示效果

fieldset

分组表单控件

button

按钮（触发某种行为）
按钮行为

--reset 重置表单

--submit 提交表单

--button 不做任何事情

    <form>
        <div><label>英文名：<input name="englishname" value="Jack Chu"></label></div>
        <div>
            <button type="reset">重置</button>
            <button type="submit">提交</button>
            <button type="button">取消</button><!--等同于<button>取消</button>-->
        </div>
    </form>