HTML Forms
HTML Forms
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>
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>
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>
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>
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>
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>
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>
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>
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.