用CSS布局表单实例(抛弃表格)
- 2022-02-26
- 来源/作者： onegreen.org / 佚名
- 9 次浏览
这是一个学习WEB标准的例子，我们在不使用标准之前为表单布局一般都使用表格，在这个例子中我们抛弃表格，来使用CSS为表单进行布局。
在这个例子中用 "label" 标签来布局表单的左部，即表单的提示内容，使表单显示的效果明显分为左右两部分，左部的宽度我们可以使用 "label" 标签来控制。
CSS设置代码：
| 〈style type="text/css"〉 label{ float: left; width: 120px; font-weight: bold; } input, textarea{ width: 180px; margin-bottom: 5px; } textarea{ width: 250px; height: 150px; } .boxes{ width: 1em; } #submitbutton{ margin-left: 120px; margin-top: 5px; width: 90px; } br{ clear: left; } 〈/style〉 HTML代码： 〈form〉 〈label for="user"〉Name〈/label〉 〈input type="text" name="user" value="" /〉〈br /〉 〈label for="emailaddress"〉Email Address:〈/label〉 〈input type="text" name="emailaddress" value="" /〉〈br /〉 〈label for="comments"〉Comments:〈/label〉 〈textarea name="comments"〉〈/textarea〉〈br /〉 〈label for="terms"〉Agree to Terms?〈/label〉 〈input type="checkbox" name="terms" class="boxes" /〉〈br /〉 〈input type="submit" name="submitbutton" id="submitbutton" value="Submit" /〉 〈/form〉 |
