智能表单（表单补充）

最新推荐文章于 2025-08-06 16:17:18 发布

原创最新推荐文章于 2025-08-06 16:17:18 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

前段专栏收录该内容

15 篇文章

订阅专栏

本文介绍H5中表单的设计与应用技巧，包括如何将表单元素置于form标签外并通过form属性关联，实现复杂表单布局。此外，还展示了表单与table元素结合的实例，帮助读者理解如何构建具有多样性的表单界面。

在h5中，表单元素可以放在form表单之外，通过form属性和表单进行关联通过关联，form表单之外的表单元素也可以把数据提交

<form action="" id="lk" method="get">
    姓名：
    <input type="text" name="name"/>
    <input type="submit"/>
</form>
    密码：
<input type="password" name="pwd" form="lk"/>

form和table的结合

<form action="">
    <table>
        <tr>
            <td>
                登录名：
            </td>
            <td>
                <input type="text"/>(可包含a-z，0-9和下划线)
            </td>
            <td>阅读</td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="password"/>(至少包含6个字符)
            </td>
            <td rowspan="8">
                <textarea name="suggest" cols="20" rows="15"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
            </td>
            <td>
                <input type="password"/>(至少包含6个字符)
            </td>
        </tr>
        <tr>
            <td>
                电子邮箱：
            </td>
            <td>
                <input type="email"/>(必须包含@个字符)
            </td>
        </tr>
        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="radio" name="sex" value="man"/>男
                <input type="radio" name="sex" value="women"/>女
            </td>
        </tr>
        <tr>
            <td>
                头像：
            </td>
            <td>
                <input type="file"/>
            </td>
        </tr>
        <tr>
            <td>
                爱好：
            </td>
            <td>
                <input type="checkbox" name="hobby" value="pe"/>运动
                <input type="checkbox" name="hobby" value="c"/>聊天
                <input type="checkbox" name="hobby" value="g"/>打游戏
            </td>
        </tr>
        <tr>
            <td>
                喜欢的城市：
            </td>
            <td>
                <select name="city">
                    <option value="请选择">请选择</option>
                    <option value="山东">山东</option>
                    <option value="山西">山西</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="同意右侧服务条款提交注册信息" style="color: darkgrey"/>
                <input type="reset" value="重填"/>
            </td>
        </tr>
    </table>
</form>