Borders or Frames within Text and Fields

[lesponce]

I'm trying to add borders to a section of my input fields.


__ Hello _____________________
| |
| Hello: Input Field Here |
| Hello: Input Field Here |
| |
____________________________|

Lines are not straight, but you get the picture. How do I accomplish this?
Thank you.

[Sammy12]

you mean a <fieldset> and <legend> tag?

The <fieldset> adds the borders automatically, the <legend> places it nicely between the borders.

<form>
     <fieldset>
          <legend>Personalia:</legend>
          Name: <input type="text" /><br />
          Email: <input type="text" /><br />
          Date of birth: <input type="text" />
     </fieldset>
</form>

http://www.w3schools.com/tags/tag_legend.asp (click the "try it yourself" button to see what it looks like)

[lesponce]

Yes, that's what I needed. Thank you.

[Sammy12]

A word of caution, I believe it renders differently in various browsers.
Don't quote me on that, but keep it in the back of your head.

[lesponce]

Thanks. I will add this code to an ASP.NET web page.

How do I align the fields to

First: blankspace XXXXXX
Last: blankspace XXXXXX
Date of Birth.......XXXXXX

instead of:
First: XXXXXX
Last: XXXXXX
Date of Birth: XXXXXX

Thx a million!

[Sammy12]

label {
     display: inline-block;
     width: 100px;
}

<form>
     <fieldset>
          <legend>Personalia:</legend>
          <label>Name:</label> <input type="text" /><br />
          <label>Email:</label> <input type="text" /><br />
          <label>Date of birth:</label> <input type="text" />
     </fieldset>
</form>

EDIT: Just fixed a <label> tag, I was missing a "/". It is working correctly now.

[lesponce]

Awesome! Thanks a lot!!