Everything about html input tag

What is input type?

By using input tag and it's attributes we can create various types of input field.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<form>
Name:<input type="text">
Password:<input type="password">
Email:<input type="email">
Date:<input type="date">
Time:<input type="time">
Date-time:<input type="datetime-local">
Month:<input type="Month">
Week:<input type="week">
File:<input type="file">
Number:<input type="number">
Range:<input type="range">
Search:<input type="search">
tel:<input type="tel">
Url:<input type="url">
Radio:<input type="radio">
Checkbox:<input type="checkbox">
Button:<input type="button">
Submit:<input type="submit">
Reset:<input type="reset">
Color Selector:<input type="color">
</form>

</body>
</html>

Input tag attributes:

1. value:What we write in value attribute, it's show on the filed so that user
can understand why this field and what type value he has to put.
2. name: We give a name to our field by passing the name in name attribute. The
text what we put in the name attribute will go to our server and save in the
database column according to the name. Database column name and that value
we pass in name attribute must be same.
3. autocomplete: To autocomplete the field this attribute is used. It has two values
on r off. Default is on.
4.required: If we use required attribute and pass value required, it means that
user can't submit or complete his work without filling this field.
5. min and max: We use min and max attribute when the input type is number, range, date,
datetime-local, month, time and week. Use this to set minimum and maximum value of the
field.
6. accept: This attribute is used when the input type is file. If we write that file extension what
we want then this field will only take that extension file.
7. minlength and maxlength: This attribute is used if out type is text or character base
field. We use it to set how many characters user can write in the field.
8. readonly:If we use readonly=readonly, it means that we are not giving permission
to the user to write something inside this field.User can only read that field.
9. multiple: If we write multiple=multiple, it means that user can input multiple values
in that field.
10. placeholder: We placeholder to show massage about what kind of field is this and what type
of value user have to input.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<form>
Name:<input type="text" value="Name" name="Name" required="required" minlength="20" maxlength="40" placeholder="Name">
Password:<input type="password" value="Password" name="Password" autocomplete="off" required="required" min="20" max="50" placeholder="Password" />
Email:<input type="email" value="Email" name="Email" required="required" placeholder="Email" />
Date:<input type="date" value="Date" name="Date" required="required" min="20" max="50" placeholder="Date" />
Time:<input type="time" value="Time" name="Time" required="required" min="20" max="50" placeholder="Time" />
Date-time:<input type="datetime-local" value="Date-time" name="Date-time" required="required" min="20" max="50" placeholder="Date-time" />
Month:<input type="Month" value="Month" name="Month" required="required" placeholder="Month" />
File:<input type="file" value="File" name="File" autocomplete="off" required="required" min="20" max="50" accept=".jpg" placeholder="File" />
Number:<input type="number" value="Number" name="Number" autocomplete="off" required="required" min="20" max="50" placeholder="Number" />
Range:<input type="range" value="Range" name="Range" min="20" max="50" placeholder="Range" />
Search:<input type="search" value="Search" name="Search" placeholder="Search" />
Tel:<input type="tel" value="Tel" name="Tel" autocomplete="off" required="required" min="20" max="50" placeholder="Tel" />
Url:<input type="url" value="Url" name="Url" placeholder="Url" />
Radio:<input type="radio" value="Radio" name="Radio" required="required" />
Checkbox:<input type="checkbox" value="Checkbox" name="Checkbox" />
Button:<input type="button" value="Button" name="Button" />
Submit:<input type="submit" value="Submit" name="Submit" />
Reset:<input type="reset" value="Reset" name="Reset" />
</form>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us