如何在小屏幕上显示表单

时间:2012-08-17 13:37:50

标签: html forms mobile

我正在尝试创建一个可以在移动设备上轻松显示的网页,但我遇到了麻烦,希望有人能指出我正确的方向。请理解我是编程新手并且正在学习。

不幸的是,我不知道如何在这里展示我的代码,但这里有一个指向相关页面的链接:

Form for mobile devices

有没有人看到任何会阻止我的表单在不使用滚动条的情况下显示在较小的屏幕上的内容?

谢谢!

1 个答案:

答案 0 :(得分:0)

我建议您删除表单的固定宽度表格布局,然后使用自然流动的布局。以下是前几个字段的示例:

<form name="contactinfo" method="post" action="process.php" onsubmit="return validateForm();">
    <fieldset>
        <legend>Application Request Form</legend>
        <div>
            <label for="name">Full Name</label><br>
            <input type="text" name="name" id="name">
        </div>
        <div>
            <label for="email">E-Mail</label><br>
            <input type="email" name="email" id="email">
        </div>
        ...
    </fieldset>
</form>

这将立即帮助布局调整到不同的设备,它也更好地标记表单。

其他建议:

  • 将所有样式放入CSS。
  • 将您的JavaScript移至页面底部(即验证功能)
  • 考虑一下你是否真的需要一个重置按钮?它的用例是什么?