HTML FORMS INPUT TYPES CHAPTER 25 PART THREE
25th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE
HTML Input Types
This chapter describes the different types for the HTML <input> element.
HTML Input Types
Here are the different input types you can use in HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Input Type Text
<input type="text"> defines
a single-line text
input field
Input Type Password
<input type="password"> defines
a password field:
<!DOCTYPE html>
<html>
<body>
<h2>Password field</h2>
<p>The <strong>input
type="password"</strong> defines a password field:</p>
<form
action="/action_page.php">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd"
name="pwd"><br><br>
<input type="submit" value="Submit">
</form>
<p>The characters in a password field are
masked (shown as asterisks or circles).</p>
</body>
</html>
OUTPUT
Password field
The input type="password" defines a password field:
The characters in a password
field are masked (shown as asterisks or circles).
Input 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
Input Type Reset
<input
type="reset"> defines
a reset button that
will reset all form values to their default values:
<!DOCTYPE html>
<html>
<body>
<h2>Reset Button</h2>
<p>The <strong>input type="reset"</strong> defines
a reset button that resets all form values to their default values:</p>
<form action="/action_page.php">
<label
for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname"
value="Happy"><br>
<label
for="lname">Last name:</label><br>
<input type="text"
id="lname" name="lname"
value="Rawat"><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>
</body>
</html>
Output
Reset Button
The input type="reset" defines
a reset button that resets all form values to their default values:
First name:
Last name:
If you change the input values and then click the
"Reset" button, the form-data will be reset to the default values.
Input Type Radio
<input type="radio"> defines
a radio button.
Radio buttons let a user select ONLY ONE of a limited number of
choices
Male
Female
Other
Input Type Checkbox
<input type="checkbox"> defines
a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
This is how the HTML code
above will be displayed in a browser:
I
have a bike
I
have a car
I
have a boat
Input Type Url
The <input type="url"> is
used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically
validated when submitted.
Some smartphones recognize the url type, and adds ".com"
to the keyboard to match url input.
<!DOCTYPE html>
<html>
<body>
<h1>Display a URL Input Field</h1>
<p>The <strong>input
type="url"</strong> is used for input fields that should
contain a URL address:</p>
<form
action="/action_page.php">
<label for="homepage">Add your homepage:</label>
<input type="url"
id="homepage" name="homepage">
<input type="submit" value="Submit">
</form>
</body>
</html>
FILE DOWNLOADING LINK BELOW
Comments
Post a Comment