Using form we receive data from the user. Without using form, communication on this internet is impossible. If you are new to HTML, learning <form> element is very important. Though there are variety of things that we can do using form, but here we are doing simple things with forms.
Starting with FIELDSET & LEGEND
<form>
<fieldset>
<legend>Fill in the form</legend>
<p> Name: <input type="text"></p>
<p> <input type="submit"></p>
</fieldset>
</form>
I love FIELDSET & LEGEND 'coz they decorate form very well. Apart from forms you can think about using them in just text, where a title is followed by bit of its content.
Using LABEL with FORM
Check above example in your browser, and click on "Name", the input-field doesn't get selected. Isn't it? But if you do the slight change by wrapping "Name & Input" in <label></label>, then if you click on "Name" the input-field gets selected. That's what <label> does. See below:
<p> <label>Name: <input type="text"></label></p>
Using AUTOFOCUS
If you want your input-field should get selected by itself, then just write "autofocus" like the following:
<p> <label>Name: <input type="text" autofocus></label></p>
Using PLACEHOLDER
Now if you want to tell (or give hint) to a person, in the input-field to write their name. Use PLACEHOLDER like the following:
<p> <label>Name: <input type="text" autofocus placeholder="Pls write your name"></label>
Use REQUIRED for input-field needs to be filled
Many times a user just "submit" a form without typing anything, to avoid this issue, just write "required" like the following example:
<p> <label>Name: <input type="text" autofocus placeholder="Pls write your name" required></label></p>
Disabling a form
If you want to disable input-filed for a while, then just write "disabled," and the form won't work. See below:
<p> <label>Name: <input type="text" autofocus placeholder="Pls write your name" required disabled></label></p>
--
To start with I didn't make <form> element complex. If you understand above, you can go ahead with the <form> element.
Comments
Post a Comment