HTML fieldset legend

最新推荐文章于 2025-08-23 15:32:34 发布

原创最新推荐文章于 2025-08-23 15:32:34 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #user #books #class

本文介绍了一个具体的用户表单实现案例，展示了如何使用CSS对表单进行美化，包括背景颜色、字体样式等，并通过Ruby on Rails提供了表单字段及验证错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.depot-form fieldset {
  background: #efe;
}
.depot-form legend {
  color: #dfd;
  background: #141;
  font-family: sans-serif;
  padding: 0.2em 1em;
}
.depot-form label {
  width: 5em;
  float: left;
  text-align: right;
  margin-right: 0.5em;
  display: block;
}
.depot-form .submit {
  margin-left: 5.5em;
}

<!--
 ! Excerpted from "Agile Web Development with Rails, 2nd Ed.",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/rails2 for more book information.
-->
<div class="depot-form">
  <%= error_messages_for 'user' %>
  <fieldset>
    <legend>Enter User Details</legend>
    <% form_for :user do |form| %>
      <p>
        <label for="user_name">Name:</label>
        <%= form.text_field :name, :size => 40 %>
      </p>
      <p>
        <label for="user_password">Password:</label>
        <%= form.password_field :password, :size => 40 %>
      </p>
      <p>
        <label for="user_password_confirmation">Confirm:</label>
        <%= form.password_field :password_confirmation, :size => 40 %>
      </p>
      <%= submit_tag "Add User", :class => "submit" %>
    
    <% end %>  
  </fieldset>
</div>