Menu
I am relatively new to HTML.
I want to get a border around form elements which are similar.
For example, for Sign Up form :
How can I do this?
438
The <fieldset> tag can be used to group input elements that logically belong together and make the visually stand out by drawing a border around them. Additionaly, the group can be given a title with the <legend> tag.
The <div> tag is used to group other HTML content together. The <div> element doesn't add or change the content of your HTML. Instead, its main purpose is to provide an easy way to target and each group.
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 :
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.
163
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/
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
