HTML INPUT
Inputs are used to collect data from from the user end of a web page.
HTML Input Types
Here are the different input types you can use in HTML:
<input type ="button">
<input type ="color"><br>
<input type ="date"><br>
<input type ="datetime-location"><br>
<input type ="email"><br>
<input type ="file"><br>
<input type ="hidden"><br>
<input type ="checkbox"><br>
<input type ="month"><br>
<input type ="number"><br>
<input type ="password"><br>
<input type ="radio"><br>
<input type ="range"><br>
<input type ="reset"><br>
<input type ="search"><br>
<input type ="submit"><br>
<input type ="tel"><br>
<input type ="text"><br>
<input type ="time"><br>
<input type ="url"><br>
<input type ="week">
INPUT TYPE TEXT
< input type ="text "> defines a single text input field.
<!DOCTYPE html>
<html>
<head>
<title>HTML input </title>
</head>
<body>
<form>
<label for="fname"> first name: </label>
<br>
<input type="text" id="fname" name="fname">
<br>
<label for="lname"> last name:</label>
<br>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Input Type Password
This input defines a password field:< input type="password">
<!DOCTYPE html>
<html>
<head>
<title>HTML input </title>
</head>
<body>
<form>
<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">
</form>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<title>HTML input </title>
</head>
<body>
<form action="registration_page.php">
<label for="fname"> first name: </label>
<br>
<input type="text" id="fname" name="fname" value="tea">
<br>
<label for="lname"> last name:</label>
<br>
<input type="text" id="lname" name="lname" value="cup">
<input type="submit" value="submit">
</form>
</body>
</html>
Input Type Radio
please note: If you change the input values and then click the "Reset" button,the form-data will reset to the default values. <input type="radio">This input type defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<!DOCTYPE html>
<html>
<head >
<title>HTML input </title>
</head>
<body>
<form>
<input type="radio" id="male" name="gender" value="male">
<br>
<label for="female"> FEMALE<label>
<br>
<input type="radio" id="other" name="gender" value="other">
<label for="other"> other</label>
</form>
</body>
</html>
Input Type Checkbox
<input type="checkbox"> defines a checkbox.Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<!DOCTYPE html>
<html>
<head >
<title>HTML input </title>
</head>
<body>
<form>
<input type="checkbox" id="sweet" name="sweet" value="orange">
<br>
<label for="sweet"> orange sweet </label>
<br>
<input type="checkbox" id="sweet2" name="sweet2" value="vanilla">
<br>
<label for="sweet2"> vanilla sweet <label>
<br>
<input type="checkbox" id="sweet1" name="sweet1" value="berry">
<br>
<label for="sweet1"> berry sweet</label>
</form>
</body>
</html>
Input Type Button
<input type="button">This input type defines a button:
<!DOCTYPE html>
<html>
<head>
<title>HTML input </title>
</head>
<body>
<form>
<input type="button" onclick="alert(hello world)" vaule="click me">
</form>
</body>
</html>
Input Type Color
This input type is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field.
<!DOCTYPE html>
<html>
<head >
<title>HTML input </title>
</head>
<body>
<form>
< input type="color" id="bestcolor" name="bestcolor"> <br>
<label for="bestcolor>pick best color </label> <br>
</form>
</body>
</html>
Input Type Date
This is used for input fields that should contain a date. Depending on browser support, a date picker can show up in the input field. min and max attributes are used to add restrictions to date.
<!DOCTYPE html>
<html>
<head >
<title>HTML input</title>
</head>
<body>
<form>
<input type="date" id="work" name="work" > <br>
<label for="work"> time to work </label> <br>
<p >min and max attributes are also used to add restrictions to dates: < /p>
<input type="date" id="workmax" name="workmax" max="2020-09-10" > <br>
<label for="workmax"> pick a date before 2020-10-10 <label> <br>
<input type="date" id="workmin" name="workmin" max="2020-10-10" > <br>
<label for="workmax"> pick a date after 2020-10-10 <label> <br>
</form>
</body>
</html>
Input Type Datetime-local
This specifies a date and time input field, with no time zone. Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<head >
<title>HTML input </title>
</head>
<body>
<form>
<input type="datetime-local" id="work" name="work" > <br>
<label for="partytime"> party (time and time) </label> <br>
</form>
</body>
</html>
Input Type Email
This is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smartphones recognize the email type, and add ".com" to the keyboard to match email input
<!DOCTYPE html>
<html>
<head >
<title>HTML input </title>
</head>
<body>
<form>
<input type="email" id="email" name="email" >
<label for="email"> enter email address</label>
</form>
</body>
</html>
Input Type File
This input type defines a file-select field and a "Browse" button for file uploads.
<!DOCTYPE html>
<html>
<head >
<title>HTML input </title>
</head>
<body>
<form>
<label for="myfile">Select a file:</label><br>
<input type="file" id="myfile" name="myfile"> <br>
</form>
</body>
</html>
Input Type Month
This gives the users the option to select a month and year. Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<head >
<title>HTML input </title>
</head>
<body>
<form>
<label for="bdaymonth":>Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth"> </form>
</form >
</body>
</html>
Input Type Number
defines a numeric input field. You can also set restrictions on what numbers are accepted.
<!DOCTYPE html>
<html>
<head >
<title>HTML input </title>
</head>
<body>
<form>
<label for="quantity">Quantity (between 1 and 10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10"> </form>
</form>
</body>
</html>
Input Type Range
The range input works like the number input, it defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, restrictions can be used to set what numbers are accepted with the min , max , and step attributes.
Input Type Search
This is used for search fields (a search field behaves like a regular text field).
Input Type Tel
This is used for input fields that should contain a telephone number.
Input Type Time
This allows the user to select a time (no time zone). Depending on browser support, a time picker can show up in the input field.
Input Type Url
This 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.
Input Type Week
The <input type="week"> allows the user to select a week and year. Depending on browser support, a date picker can show up in the input field.
The following are examples of range, search, telephone,time, URL, and week
<!DOCTYPE html>
<html>
<head >
<title>HTML input </title>
</head>
<body>
<form>
<label for="vol">Volume (between 0 and 50): </label>
<input type="range" id="vol" name="vol" min="0" max="200"><br>
<label for="gsearch">Search Google: </label>
<input type="search" id="gsearch" name="gsearch"> <br>
<label for="phone"> Enter your phone number: </label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}- [0-9]{3}"><br>
<label for="appt">Select a time: </label>
< input type="time" id="appt" name="appt"><br>
<label for="homepage">Add your homepage: </label>
<input type="url" id="homepage" name="homepage"> <br>
<label for="week"> Select a week: </label>
<input type="week" id="week" name="week"><br>
</form >
</body>
</html>
Input Restrictions
Input Restrictions are attributes added to input elements to give them an extra meaning.
- checked- Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
- disabled- Specifies that an input field should be disabled
- max- Specifies the maximum value for an input field
- maxlength- Specifies the maximum number of character for an input field
- min- Specifies the minimum value for an input field
- pattern- Specifies a regular expression to check the input value against
- readonly- Specifies that an input field is read only (cannot be changed)
- required- Specifies that an input field is required (must be filled out)
- size- Specifies the width (in characters) of an input field
- step- Specifies the legal number intervals for an input field
- value- Specifies the default value for an input field
