AitSchool

首页内容

使用表单完善首页的提交功能

  1. 为首页添加 form-section 模块和 ，container 容器。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小猪快递查询</title>
</head>
<body>
    <header class="page-header">
        <div class="user-info">
            <img class="user-avatar" src="./avatar.png">
            <span class="user-nickName">张三</span>
        </div>
        <nav class="page-nav">
             <a href="./index.html">首页</a>
             <a href="./history.html">历史</a>
        </nav>
    </header>
    <div class="page-body">
        <!-- 这里 -->
        <div class="form-section">
            <div class="container"></div>
        </div>
        <!-- 这里 -->
    </div>
    <footer class="page-footer">
        <p>Copyright  2018 扎克斯未来体验技术部出品</p>
    </footer>
</body>
</html>
  1. 添加我们的主标题，“小猪快递查询”
*
*
*
<div class="form-section">
    <div class="container">
        <h1 class="h1">小猪快递查询</h1>
    </div>
</div>
*
*
*
  1. 添加form 标签，并为每一项空间添加一个容器名为 form-item , 因为 input 控件是行内元素，添加一个容器可以让不同控件换行区分。
*
*
*
<div class="form-section">
    <div class="container">
        <h1>小猪快递查询</h1>
        <form class="form-list">
            <div class="form-item"></div>
            <div class="form-item"></div>
            <div class="form-item"></div>
        </form>
    </div>
</div>
*
*
*
  1. 填充输入控件，分别有文字输入控件的订单号输入和快递公司选择的下来选择控件。
*
*
*
<div class="form-section">
    <div class="container">
        <h1>小猪快递查询</h1>
        <form class="form-list">
            <div class="form-item">
                <select class="form-item-select" name="company">
                    <option disabled selected value>请选择</option>
                    <option value="yunda">韵达</option>
                    <option value="shunfeng">顺丰</option>
                </select>
                <span class="form-item-error">请选择快递公司</span>
            </div>
            <div class="form-item">
                <input placeholder="请输入订单号" class="form-item-input" type="number" name="order" />
                <span class="form-item-error">请输入订单号</span>
            </div>
            <div class="form-item">
                <button id="submit">提交</button>
            </div>
        </form>
    </div>
</div>
*
*
*

← 详情页 →