HTML FORMS: Hang in there

Success is not something to be found but every hardworker gets to hear “ I’ll find out”

Back in the day, there was a lovely language called HTML, which is used to make a website very pleasant. As mentioned in the previous blog we have learned the basics of HTML but here we will be learning some engaging objectives of HTML.

We will be learning, how to create a form and what all are the important syntax’s to be used in order, to create a successful form.

The HTML element <form> is used to create an HTML form for the users. It is placed in the body tag of HTML. It helps the user to fill the form with the details and get linked with some organization or personal websites. The form elements start with <form> and end with </form>,

with elements like:

→<input>

Syntax: <input type= “ ”>

In this type, you can include text, radio, checkbox, submit, etc.

→ <label>

Syntax: <label for =”fname “>First name :</label> or <label for=”lname”>Last name :</label>

This is to get first name and last name of user respectively.

→<select>

Syntax: <submit> <option value=” “></option></submit>

It can be used to give options to a user instead of writing it.

→ <textarea>

Syntax: <textarea name=” “ rows=” “ cols=” “> </text area>

Here the rows attribute specifies the visible number of lines where as the cols attribute specifies the visible width of the text area.

→<button>

Syntax: <button value=”text” >Click me </button>

→ <fieldset>

Syntax: <fieldset><fieldset>

Inside fieldset you can include elements which you want to list out. For example, you can include <input>, <legend>, <label> etc.

→ <legend>

Syntax: <legend></legend> a legend defines a caption for the <fieldset>.

→<datalist>

Syntax: <datalist><option></option></datalist>

It specifies a list of pre-defined options for an <input> element. By using it a user can see a dropdown option to choose an option for the input.

→<output>

Syntax: <output></output>

It gives an output result to a calculation (like the one performed in the script).

→<option>

Syntax: <option></option>

As mentioned previously in the <select> element it can be used to give an option to the user.

→<optgroup>

Syntax: <optgroup></optgroup>

This tag is used to group a set of options in an <select> element i.e., the dropdown list.

In between the form attribute as per the requirement of the form. Note that except <input> all the other elements listed above require a closing tag. These elements in form also have sub-elements like type, for, etc. Where type can determine that the input will be text or email or button or submit or radio or checkbox etc. These elements help to also check the validation of input from the user to some extent instead of using JavaScript for validating it. In these attributes, we can also include a placeholder to help the user identify the format of the input.

Web pages contain all sorts of buttons. Be it a submit button at an end of a form, a register button for an event, or buttons in a web game. Html has a specific element for buttons.

<button> tag refers to a clickable button. It contains text and has various properties which provide a multitude of functions.

Type=” ”

Name=” ”

Value=” “

Form=” ”

Once an HTML button is created, it can be styled using colors, borders, hovers, etc. The on-click property provided by HTML makes it simpler to add a purpose to the button.

The below picture is detailed code is written, which is used to create a form.

OUTPUT FOR THE WRITTEN CODE:

“They yearn for what they fear for.”― Dante Alighieri, Inferno

Try out many new things that excite you, captures your heart and attention both, to know where your happiness lies.

Be a child in a beautiful wind but be an adult in a storm, LET’S HELP EACH OTHER TO GROW……