Saturday, 27 December 2014

How to add border outside a form in html ?

 and Tag

.here's the same form as above using the commands we'll hit today.

Step One: Personal InformationName: 
Step Two: FavoritesFavorite Color: Red:  Blue:  Green: 
Favorite Toothpaste: Crest:  Close-Up:  Gleem: 
Step Three: Send it

The Tags

Take a good long look at the form above. You should be able to get it, and this text, on your screen at the same time. Notice that I grouped elements together by drawing a lined box around them. Remember that you can place as many form elements inside the lined box you want. The elements will react to HTML just like they always did, it's just that you've drawn a line around them.
In addition to the line, I've added a title in bold. The title text is placed in the upper left hand of the lined box by default. I used tags to make the text bold. Now the tags:
drew the lined box. set the title.
You can pretty much take it from here, but let's take a look at the code that created the first little section that surrounds the two text boxes:

Step One: Personal Information
draws the lined box. sets the title.
Follow that pattern again and again grouping form elements as you wish. No sweat.

Use A Table Too

I know this reads like it is in direct contradiction to what I wrote about tables and forms up above, but hear me out. Notice how the FIELDSET table is confined to only 375 pixels wide. It is that way because I surrounded the entire form with a single table cell with the width set to 375. Please note that I said a single table cell. That's the key.
It was done purely for aesthetics. If you don't surround the form with a table cell, the lined box runs the length of the browser screen. If there's a way to stop the box from doing that without using a table cell, I couldn't find it. Even examples on the MSIE site showed a table being used to confine the width of the box. My reference book suggests that the attributes ALIGN and WIDTH work with the FIELDSET tag. I tried to get them to work time and time again. No dice.
Maybe you'll have more luck. Enjoy the commands.

No comments:

Post a Comment