Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post

    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.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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)
    Last edited by Sammy12; 09-08-2012 at 12:08 AM.

  • Users who have thanked Sammy12 for this post:

    lesponce (09-08-2012)

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    Yes, that's what I needed. Thank you.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.

  • Users who have thanked Sammy12 for this post:

    lesponce (09-08-2012)

  • #5
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    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!
    Last edited by lesponce; 09-08-2012 at 12:32 AM.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.
    Last edited by Sammy12; 09-08-2012 at 12:37 AM.

  • Users who have thanked Sammy12 for this post:

    lesponce (09-08-2012)

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    Awesome! Thanks a lot!!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •