HTML fieldset legend

来源：互联网发布：古琴网络教学编辑：程序博客网时间：2024/05/27 00:43

.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>