How to create HTML Form?, HTML Form Tag and Elements

0
322
html form

HTML Form

HTML Form is required to collect different kinds of information, such as contact details like name, email address, phone numbers, or details like credit card information, etc.

HTML forms used to pass data to a server.

An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend and label elements.

The tag <form> is used to create an HTML form. Here’s a syntax

<form action="server url" method="get|post"> 
    //input controls e.g. textfield, textarea, radiobutton, button 
</form>

HTML Tags

Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

HTML Forms Input Element

  • The most important form element is the <input> element.
  • The <input> element is used to select user information.
  • An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button and more.
  • The most common input types are described below:

Text Fields

<input type=”text”> define a one-line input field that a user can enter text into:

<form > 
   First name: <input type="text" name="first_name" /> <br> 
   Last name: <input type="text" name="last_name" /> 
</form>

Password Field

<input type=”password”> define a password field that a user can enter password into: (shown as asterisks or circle)

<form >
   Password: <input type="password" name="password" /> 
</form>

Radio Buttons

<input type=”radio”> defines a radio button. Radio buttons let a user select Only One of a limited number of choices:

<form >
   <input type="radio" name="sex" value="male" > Male
   <input type="radio" name="sex" value="female" > Female 
</form>

Checkboxes

<input type=”checkbox”> defines a checkbox. Checkboxes let a user select Zero or More options of a limited number of choices.

<form >
    <input type="checkbox" name="qualification" value="10" > 10
    <input type="checkbox" name="qualification" value="12" > 12
    <input type="checkbox" name="qualification" value="Garduation" > Graduation
</form>

Date & Time

<input type=”date”> defines a date.

<input type=”time”> define a time. user can input a date and time.

<form >
   Date of Birth : <input type="date" name="dob">
   Time of Birth : <input type="time" name="tob">
</form>

Submit Button

<input type=”submit”> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute.

<input type=”reset”> defines a reset button. A reset button resets all the forms control to default values.

<form >
   <input type="submit" name="submit" value="Submit" > 
   <input type="reset" name="reset" value="Reset" > 
</form>

Textarea

This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

<form > 
    <textarea rows="5" cols="100" name="description"> 
         Enter description here... 
    </textarea> 
</form>

Select Box

A select box also called drop down box which provides an option to list down various options in the form of drop down list, from where a user can select one or more options.

<form >
   <select name="dropdown">
      <option value="Maths" selected>Maths</option>
      <option value="Physics">Physics</option>
      <option value="Chemistry">Chemistry</option>
  </select> 
</form>

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here