<input type="text"> defines a one-line text input field.
HTML Code:
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>
Result:
Note that the form itself is not visible.
Also note that the default width of a text field is 20 characters.
Type Password
<input type="password"> defines a password field.
HTML Code:
<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>
<p>The characters in a password field are masked (shown as asterisks or circles).</p>
Result:
The characters in a password field are masked (shown as asterisks or circles).
Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute.
HTML Code:
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click "Submit", the form-data will be sent to a page called "/action_page.php".</p>
Result:
If you click "Submit", the form-data will be sent to a page called "/action_page.php".
Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values.
HTML Code:
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
<p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p>
Result:
If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.
Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
HTML Code:
<form action="/action_page.php">
<input type="checkbox" name="vehicle1" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car">I have a car
<br><br>
<input type="submit">
</form>
