【My Study Note】Input types
Input types
When you use an input element, you better use labels with it for the purpose of assisting accessibility software and understanding the form. When you use the label, you use an attribute that specifies which input field it’s related to. Inside the for attribute, you specify the “id” which you specified inside the input element.
Button
<input type="button" value="Click me" onclick="msg()" />This displays a clickable button and it’s mostly used in HTML forms to activate a script when clicked.
<button onclick="alert('Are you sure you want to continue?')">
<img src="https://yourserver.com/button_img.jpg"
alt="Submit the form" height="64" width="64">
</button> Keep in mind you can also define buttons with the <button> tag, with the added benefit of being able to place content like text or images inside the tag.
Checkbox
<input type="checkbox" id="dog" name="dog" value="Dog">
<label for="dog">I like dogs</label>
<input type="checkbox" id="cat" name="cat" value="Cat">
<label for="cat">I like cats</label>Defines a check box allowing single values to be selected or deselected. They are used to let a user select one or more options of a limited number of choices.
Radio
<input type="radio" id="light" name="theme" value="Light">
<label for="light">Light</label>
<input type="radio" id="dark" name="theme" value="Dark">
<label for="dark">Dark</label> Displays a radio button, allowing only a single value to be selected out of multiple choices. They are normally presented in radio groups, which is a collection of radio buttons describing a set of related options that share the same “name” attribute.
Submit
<form action="myserver.com" method="POST">
<input type="submit" value="Submit" />
</form>Displays a submit button for submitting all values from an HTML form to a form-handler, typically a server. The form-handler is specified in the form’s “action” attribute.
Text
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"> Defines a basic single-line text field that a user can enter text into.
Password
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"> Defines a single-line text field whose value is obscured, suited for sensitive information like passwords.
Date
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="date of birth">Displays a control for entering a date with no time (year, month and day).
Datetime-local
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">Defines a control for entering a date and time, including the year, month and day, as well as the time in hours and minutes.
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">Defines a field for an email address. It’s similar to a plain text input, with the addition that it validates automatically when submitted to the server.
File
<labe for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">Displays a control that lets the user select and upload a file from their computer. To define the types of files permissible you can use the “accept” attribute. Also, to enable multiple files to be selected, add the “multiple” attribute.
Hidden
<input type="hidden" id="custId" name="custId" value="3487">Defines a control that is not displayed but whose value is still submitted to the server.
Image
<input type="image" src="submit_img.png" alt="Submit" width="48" height="48">Defines an image as a graphical submit button. You should use the “src” attribute to point to the location of your image file.
Number
<input type="number" id="quantity" name="quantity" min="1" max="5">Defines a control for entering a number. You can use attributes to specify restrictions, such as min and max values allowed, number intervals or a default value.
Range
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="10">Displays a range widget for specifying a number between two values. The precise value, however, is not considered important. This is typically represented using a slider or dial control. To define the range of acceptable values, use the “min” and “max” properties.
Reset
<input type = "reset">Displays a button that resets the contents of the form to their default values.
Search
<label for="gsearch">Search in Google:</label>
<input type="search" id="gsearch" name="gsearch">Defines a text field for entering a search query. These are functionally identical to text inputs, but may be styled differently depending on the browser.
Time
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">Displays a control for entering a time value in hours and minutes, with no time zone.
Tel
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[+]{1}[0-9]{11,14}">Defines a control for entering a telephone number. Browsers that do not support “tel” fall back to standard text input. You can optionally use the “pattern” field to perform validation.
Url
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">Displays a field for entering a text URL. It works similar to a text input, but performs automatic validation before being submitted to the server.
Week
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">Defines a control for entering a date consisting of a week-year number and a year, with no time zone. Keep in mind that this is a newer type that is not supported by all the browsers.
Month
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth" min="1930-01" value="2000-01">Displays a control for entering a month and year, with no time zone. Keep in mind that this is a newer type that is not supported by all the browsers.
Specify the length of letters
<input type="text" id="user" name="user" required minlength="3" maxlength="15">You can use minlength and maxlength.
Change the style when the input value in invalid from CSS
input:invalid {
border: 2px solid red;
}This would manipulate the web page when the input value is invalid. However, when you code like this, when the page is loaded, it would be red as well since it’s a empty value. To prevent from this happening, you should use “focus” as well.
input:focus:invalid {
border: 2px solid red;
}Fieldset
<fieldset id = "theme">
<input type="radio" id="light" name="theme" value="Light">
<label for="light">Light</label>
<input type="radio" id="dark" name="theme" value="Dark">
<label for="dark">Dark</label>
</fieldset>When you use the “input type=”radio”, you better code it inside the fieldset.
Also, it’s essential to set the id attribute of the fieldset and the name attribute of input to be the same.
Checked
<!-- As a default, "light" would be selected from the beginning. -->
<input type="radio" id="light" name="theme" value="Light" checked>
<label for="light">Light</label>
<input type="radio" id="dark" name="theme" value="Dark">
<label for="dark">Dark</label> This attribute makes that choice to be the default.
How to choose the choice by not only clicking the button?
<fieldset id="theme">
<field>
<input type="radio" id="light" name="theme" value="Light" checked>Light
</field>
<field>
<input type="radio" id="dark" name="theme" value="Dark"> Dark
</field>
</fieldset>radioを使うときに、その丸いボタンを押すことでしか選択できなかったら、特にスマートフォンの時に不便。だから、その選択肢ごと、つまりその選択肢の意味を説明している単語ごとクリックできたら、使いやすい。その為には、labelの中にそれぞれを入れたら良し！
Data List Input Type
<input list="locations">
<datalist id="locations">
<option value="Sydney"></option>
<option value="Brisbane"></option>
<option value="Gold Coast"></option>
<option value="Melbourne"></option>
<option value="Perth"></option>
<option value="Adelaide"></option>
</datalist>The data list input type allows you to specify a list of available options that will appear in a drop-down list. There can be tens and hundreds of options, so the field allows the user to begin typing, and it will narrow down the available options based on their input.