HTML Form

HTML Form

HTML Form

  • HTML forms are used to collect inputs or data from users.

  • HTML form contains input elements like textarea, buttons, radio buttons, submit button, password input, text input, select options etc.

  • HTML form elements come inside <form> </form> tag.


HTML Input Text

  • <input type="text"> tag is used to collect the text from user.

  • HTML name attribute is used to define the name or identity of the <input> element.

  • HTML value attribute is used to define the initial value for an input field.

Example:
<form>
First Name: <input type="text" name="firstname">
Last Name: <input type="text" name="lastname">
</form>
Run Code »
Example Explanation:

In the above, we have shown an example of HTML Input Type Text.

Run the code to see the effect.


HTML Input Password

  • <input type="password"> tag is used to collect the password from user.

Example:
<form>
User Password: <input type="password" name="user_password">
</form>
Run Code »
Example Explanation:

In the above, we have shown an example of HTML Input Type Password.

Run the code to see the effect.


HTML Radio Button

  • <input type="radio"> tag is used to collect a choice from user.

Example:
<form>
<input type="radio" value="male" name="sex"> Male
<input type="radio" value="female" name="sex"> Female
<input type="radio" value="other" name="sex"> Other
</form>
Run Code »
Example Explanation:

In the above, we have shown an example of HTML Input Type Radio.

Run the code to see the effect.


HTML Checkbox

  • <input type="checkbox"> tag is used to collect choices from user.

Example:
<form>
<input type="checkbox" value="Car"> Car
<input type="checkbox" value="Bike"> Bike
<input type="checkbox" value="Bicycle"> Bicycle
</form>
Run Code »
Example Explanation:

In the above, we have shown an example of HTML Input Type Checkbox.

Run the code to see the effect.


HTML Button

  • <input type="button"> tag is used to define a button on HTML web page which help user to do an action.

Example:
<form>
<input type="button" value="Click_Me">
</form>
Run Code »
Example Explanation:

In the above, we have shown an example of HTML Input Type Button.

Run the code to see the effect.


HTML Textarea

  • <textarea> tag is used to collect multi-line text from user.

  • We can set the initial size of textarea by cols and rows attributes.

  • rows attribute defines the number of rows in the text area.

  • cols attribute defines the number of columns in the text area.

Example:
<form>
<textarea name="message" rows="10" cols="30">Write you message here.</textarea>
</form>
Run Code »
Example Explanation:

In the above, we have shown an example of HTML Textarea with cols and rows attributes.

Run the code to see the effect.


HTML Select Option

  • <select> tag is used to provide a drop-down list of options to the user to choose.

  • Every option comes inside <option> </option> tag.

  • By default, the list normally shows the first item as selected.

Example:
<form>
<select name="car">
<option>Audi</option>
<option>Lamborghini</option>
<option>Ferrari</option>
</select>
</form>
Run Code »
Example Explanation:

In the above, we have shown an example of HTML Select Options Form Element.

Run the code to see the effect.


HTML Submit Button

  • <input type="submit"> tag is used to define HTML submit button.

  • HTML Submit button is used to send all the input data to the server through form handler.

  • The form-handler is typically a server page which is a script for processing input data.

  • HTML action attribute specifies the URL of form handler page for processing input data.

Example:
<form action="contact.php">
First Name: <input type="text" name="firstname">
Last Name: <input type="text" name="lastname">
User Password: <input type="password" name="user_password">
<input type="submit" value="Submit">
</form>
Run Code »
Example Explanation:

In the above, we have shown an example of HTML Select Options Form Element.

  • <input type="submit"> tag send all the input values ( firstname, lastname and user_password ) to the server.
    The server receives and processes the values by using the contact.php script.

Run the code to see the effect.


HTML Form in Hindi

Best Use:360p or more (480p or 720p)