CodingForums.com - Borders or Frames within Text and Fields

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Borders or Frames within Text and Fields (http://www.codingforums.com/showthread.php?t=272525)

lesponce

09-07-2012 11:44 PM

Borders or Frames within Text and Fields

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

09-08-2012 12:06 AM

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

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

Code:

<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

09-08-2012 12:21 AM

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

Sammy12

09-08-2012 12:25 AM

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

09-08-2012 12:28 AM

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

09-08-2012 12:34 AM

Code:

label {

     display: inline-block;

     width: 100px;

}

Code:

<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

09-08-2012 01:01 AM

Awesome! Thanks a lot!!

All times are GMT +1. The time now is 09:15 AM.