Form 表单

Form 表单。包含数据录入、校验以及对应样式。

Form - H5UIh5ui.io

表单输入

<div class="h5ui-group">
    <h5 class="h5ui-group_title">
        表单输入
    </h5>

    <div class="h5ui-form">
        <label for="username" class="h5ui-form-label">表单标题</label>
        <input type="text" id="username" class="h5ui-form-input" placeholder="占位输入提示">
    </div>

    <div class="h5ui-form">
        <label for="email" class="h5ui-form-label">Email</label>
        <input type="email" id="email" class="h5ui-form-input" placeholder="[email protected]">
    </div>

    <div class="h5ui-form">
        <label for="password" class="h5ui-form-label">密码表单</label>
        <input type="password" id="password" class="h5ui-form-input" placeholder="设置登录密码">
    </div>
</div>

<div class="h5ui-group">
    <div class="h5ui-form">
        <label class="h5ui-form-label">详细地址</label>
        <textarea rows="3" class="h5ui-form-input" placeholder="请输入详细地址"></textarea>
    </div>
</div>

表单错误提示

<div class="h5ui-form h5ui-form-error">
    <label for="" class="h5ui-form-label">表单标题</label>
    <input type="text" id="" class="h5ui-form-input" placeholder="占位输入提示">
    <span class="h5ui-form-input_tip">
        <i class="icon-form_error"></i>
    </span>
</div>

表单输入扩展

<div class="h5ui-form">
    <label for="money" class="h5ui-form-label">金额表单</label>
    <input type="number" pattern="[0-9]*" id="money" class="h5ui-form-input" placeholder="请输入金额">
    <span class="h5ui-form-input_tip">元</span>
</div>

<div class="h5ui-form">
    <label for="phone" class="h5ui-form-label">手机号</label>
    <input type="number" pattern="[0-9]*" id="phone" class="h5ui-form-input" placeholder="请输入手机号">
    <span class="h5ui-form-input_tip">
        <a href="" class="code-btn">获取验证码</a>
    </span>
</div>

只读表单

<div class="h5ui-form">
    <label for="user-email" class="h5ui-form-label">只读表单</label>
    <input type="text" id="user-email" class="h5ui-form-input" readonly="readonly" value="我是只读表单 readonly" placeholder="">
</div>

<div class="h5ui-form">
    <label for="user-email" class="h5ui-form-label">只读表单</label>
    <div class="h5ui-form-static">
        我是纯文本
    </div>
</div>

长内容表单

<div class="h5ui-form">
    <input type="text" id="title" class="h5ui-form-input h5ui-input-cell" placeholder="填写项目标题">
</div>

<div class="h5ui-form">
    <textarea name="detail" class="h5ui-form-input h5ui-input-cell" placeholder="填写项目内容" rows="5"></textarea>
</div>

图片上传表单

<div class="h5ui-group h5ui-uploader">
    <h5 class="h5ui-uploader_title">
        图片上传标题
    </h5>
    <ul class="h5ui-uploader_files">
        <li class="h5ui-uploader_files_item">
            <a href="">
                <img src="../img/example.png" width="100%" height="100%" title="H5UI">
            </a>
        </li>
        <li class="h5ui-uploader_files_item">
            <a href="">
                <img src="../img/example.png" width="100%" height="100%" title="H5UI">
            </a>
        </li>
    </ul>
    <div class="h5ui-uploader_btn">
        <div class="h5ui-uploader_btn_border"></div>
        <input id="" type="file" multiple="" accept="image/jpeg,image/png,image/bmp">
    </div>
    <div class="clearfix"></div>
</div>

<!-- 表单说明文字 -->
<div class="h5ui-form_tip">
    我是表单说明文字，建议上传高清无码图片。
</div>