HTML 21 💻 input and textarea elements
<form method=”post”> <input type=”hidden” name=”id” value=”1″> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name” placehodler=”Your name” required> <label for=”password”>Password:</label> <input type=”password” id=”password” name=”name”> <label for=”age”>Age:</label> <input type=”number” id=”age” name=”age” value=”19″> <label for=”datetime”>Date and Time:</label> <input type=”datetime-local” id=”datetime” name=”datetime”> <label for=”time”>time:</label> <input type=”time” id=”time” name=”time”> <label for=”range”>Range:</label> <input type=”range” id=”range” name=”range” min = “0” max = “10” step “1” value = “9” > <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”> <label for=”url”>url:</label> <input type=”url” id=”url” name=”url”> <label for=”userInput”>Enter your message:</label> <textarea id=”userInput” name=”userInput” rows=”4″ cols=”50″></textarea> <input type=”checkbox” id=”option1″ name=”exampleCheckboxGroup”> <label for=”option1″>Option 1</label> <input type=”checkbox” id=”option2″ name=”exampleCheckboxGroup”> <label for=”option2″>Option 2</label> <input type=”checkbox” id=”option3″ name=”exampleCheckboxGroup”> <label for=”option3″>Option 3</label> <input type=”radio” id=”option1″ name=”shippingMethod”> <label for=”option1″>Next-day delivery (extra fee)</label> <input type=”radio” id=”option2″ name=”shippingMethod”> <label for=”option2″>Standard delivery</label> <input type=”radio” id=”option3″ name=”shippingMethod”> <label for=”option3″>Pick up in store</label> </form>
in other words name attribute in radio buttons specifies if they are at the same radio button group
input element is a powerful element for collecting user input
It can be used in many ways to meet our needs
type attribute specifies the type of input
name attribute specifies the name of the input so it can be referenced by JavaScript
value attribute sets the default value
placeholder attribute provides a hint to the users
required attribute indicates that input element must not be empty
type text shows a single line text input that accepts letters and numbers
type password shows a single line text input that hides the characters as they are typed
type number shows a numeric input fields
type date shows an input field that displays a calendar so the user can select a date
type time shows an input field that the user enter a time
type datetime-local shows an input field with date and time
type range shows an input field that you can set restrictions with min, max and step attributes
type email shows an input field that accepts email and checks if it is valid
type url show an input field that accepts a URL and checks if it is valid
shows a multi line input
rows and cols attributes specify the size of the element
type checkbox shows a checkbox that allows the user to select/toggle an option
It is usually accompanied by some text or icon
radio buttons are another type that allows users to select an available option
if the name attributes are the same the the user can choose only one