CODEWITHSUNDEEP
html
Still Learning
Still Learning

Reputation: 501

How to group elements in HTML forms? Get a border around them?

I am relatively new to HTML.

I want to get a border around form elements which are similar.

For example, for Sign Up form :

enter image description here

How can I do this?

Upvotes: 11

Views: 13510

Answers (5)

The Room
The Room

Reputation: 808

The tag you are looking for is <fieldset> 

<fieldset style="width:270px">
<legend>Contact details</legend> 
<label>Name:<br /></label>
<input type="text" name="name"><br />
<label>Email:<br />
<input type="text" name="email"></label><br /> 
<label>Mobile:<br />
<input type="text" name="mobile"></label><br /> 
</fieldset>

The result would be something like this :

enter image description here

And whatever is there in your legend tag is going to be displayed in the box as heading for the group.

The width determines the size of the box. If no width is mentioned, or you haven't used any CSS, the size of the rectangle would be that of the browser window.

Upvotes: 11

Arun
Arun

Reputation: 1719

<!DOCTYPE html>
<html>
<body>

<form>
 <fieldset>
  <legend>Sign up:</legend>
   <label>Name:</label>
   <br>
   <input type="text" name="name"/><br>
   <label>Email: </label>
   <br>
   <input type="email" name="email"/><br>
    <label>Date of birth:</label>
   <br>
  <input type="text" name="dob"/>
 </fieldset>
</form>

</body>
</html>

Upvotes: 0

Piyush Bansal
Piyush Bansal

Reputation: 41

The way you can do this is:-

<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>

Upvotes: 0

whisk
whisk

Reputation: 655

Using the <legend>Sign Up</legend> tags

Upvotes: 1

danjbh
danjbh

Reputation: 615

do you mean something like this?

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Demo here: https://jsfiddle.net/991avcmv/

Upvotes: 4

Related Questions