what are Input Elements? and for what they are Used?
Input elements are used to create interactive controls for forms in order to accept data from the user. a wide variety of types of input data and control widgets are available, There are many Input types in HTML discussed below.
What is the syntax of the input element?
<input type="your input type" >
Notice that we can add more attributes based on the input type , like if the input type was text we can add the attribute placeholder which will show a defining text inside the input field that explains for the user what is expected to be written inside the input field.
Don't worry i have discussed all of the inputs with a code snippet so that you can understand how to use them .
Input types
NOTE: Before we start, i have included one link in the end, where you can see the out put and the code files .
text
the input type text is used to create a field that accepts data from the user like his first name , last name, description etc...
<input type="text" placeholder="enter your name">
password
the input type tpassword is used to create a password field where the user can enter his password for authentication or when signing up etc...
<input type="password" placeholder="Enter your passsword">
the input type Email is used to create an input field where the user can enter his email in the mail format like: salehedhahwork@gmail.com if the user inputs another format a warning message will be shown to him with the error code or message.
<input type="email" placeholder="Enter your Email">
radio
the input type radio is used to create a radio button , allowing the user to select a single value out from multiple values, BUT all the values should have the same name.
<input type="radio" name="Gender" >
<input type="radio" name="Gender" >
checkbox
the input type checkbox is used to create a checkbox buttons , allowing the user to select multiple values .
<input type="checkbox" >
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
date
the input type date is used to create a field with a pre-defined values that you have just to chose the date. when the user clicks it will show automatically the days, months, years and the user have to just select it.
<input type="date" >
the input type time is used to create a field with a pre-defined values that you have just to chose the time. when the user clicks it, it will show automatically the Hours and Minutes, and the user have to just select it.
<input type="time">
color
the input type color is used to create a control for specifying a color; opening a color picker when active in supporting browsers.
<input type="color">
file
the input type color is used to create a control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
<input type="file">
range
the input type color is used to create a control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.
<input type="range" min="0" max="100" value="10">
submit
the input type color is used to create a submit button which is used to submit a form. you can set the value attribute to give it a name that indicate to the user what it's job.
<input type="submit" value="Submit">
button
the input type color is used to create a clickable button.
<input type="button" value="click me">
reset
the input type color is used to create a button that resets the contents of the form to default values. Not recommended.
<input type="reset" value="Reset">