前端学习（十三） 表单内容（html）

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

构建表单

所有的表单都是from组成的（注意，按钮只可以是button）

<form>
    <div><label>姓名:<input></label></div>
    <div><label>电话：<input type="tel"></label></div>
    <div><label>邮箱：<input type="email"></label></div>
    <fieldset>
        <legend>披萨大小</legend>
        <input type="radio" name="size">小
        <input type="radio" name="size">中
        <input type="radio" name="size">大

    </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>
    <div>
        <button >提交</button>
    </div>

</form>

服务器处理接口

假设服务器需要用到的数据信息如下

-https://pizza.example.com/order

-application/x-www-form-urlencoded

-custname,custtel,custemail,size,topping,delivery

表单配置

把提交类型，属性，地址等信息加入表单，radio和chekbox因为name值是相同的，所以用value区分

<form method="post" 

           enctype="application/x-www-form-urlencoded" 

           action="https://pizza.example.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>
        <input type="radio" name="size" value="small">小
        <input type="radio" name="size" value="medium">中
        <input type="radio" name="size" value="large">大
    </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>
    <div>
        <button >提交</button>
    </div>

</form>

验证表单

通常一些简单的校验会在表单提交之前有前端做简单的校验，为表单的项加上required就可以了

<form method="post" enctype="application/x-www-form-urlencoded" action="https://pizza.example.com/order">
    <div><label>姓名:<input name="custname" required></label></div>
    <div><label>电话：<input type="tel" name="custtel" required></label></div>
    <div><label>邮箱：<input type="email" name="custemail" required></label></div>
    <fieldset>
        <legend>披萨大小</legend>
        <input type="radio" name="size" value="small" required>小
        <input type="radio" name="size" value="medium">中
        <input type="radio" name="size" value="large" >大
    </fieldset>
    <fieldset>
        <legend>披萨配料</legend>
        <label><input type="checkbox" name="topping" value="bacon" required>熏肉</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>
    <div>
        <button >提交</button>
    </div>
</form>