Rajesh Kumar Barik's Blog

Input Elements

Rajesh Kumar Barik's photo
Rajesh Kumar Barik
·

2 min read

Table of contents

The <input> element is used where the user can enter data. The input tag is used within < form> element.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="Fname">First Name:</label>
        <input type="text" required placeholder="First Name" > <br>

        <label for="Mname">Middle Name:</label>
        <input type="text" required placeholder="Middle Name"><br>

        <label for="Lname">Last Name:</label>
        <input type="text" required placeholder="Last Name"><br>

        <label for="DOB">DOB:</label>
        <input type="date" name="DOB" id="DOB"><br>

        <label for="Gender">Gender:</label>

        <input type="radio" name="Gender" id="Gender">
        <label for="Male">Male</label><br>

        <input type="radio" name="Gender" id="Gender">
        <label for="Male">Female</label><br> 


<label for="Mobile No">Mobile No</label>
<input type="tel" name="" id=""> <br>
<label for="Email">Email</label>
<input type="email" name="" id=""> <br>

Highest Education:<input type="radio" name="HE" id="">10th  <input type="radio" name="HE" id="">12th <input type="radio" name="HE" id="">Graduation <br>

<input type="button" value="save">
<input type="submit" value="submit">



    </form>
</body>
</html>

<input> types

  1. Text - creates a single-line text input field, where the user can type any text input.

  2. Button -creates a button with no default functionality.

  3. Checkbox - A check box allowing single values to be selected/deselected.

  4. Color - creates a color picker.

  5. Date - creates a date (year, month, and day).

  6. Datetime-Local - creates a date and time.

  7. Email - creates an input field that allows the user to input an email address.

  8. File - Allow the user to upload a file or multiple files.

  9. Hidden - This creates an invisible input field that the user can not see.

  10. Image - Define an image as the submit button.

  11. Month - Allow the user to enter month and year (Year-Month).

  12. Number - Allow the user to enter a number.

  13. Password - A single-line text field whose value is obscured. Will alert the user if the site is not secure.

  14. Radio - Let the user select exactly one option from a list of predefined options.

  15. Range - Creates a range picker from which the user can select the value.It has a Default range value from 0 to 100.

  16. Reset - Creates the button which clears all the form values to their default value

  17. Search - Allows the user to enter their search queries in the text fields

  18. Submit - A button that submits the form.

  19. Tel - Defines the field to enter a telephone number

  20. Time - Let the user easily enter a time (hours & minutes).

  21. Url -Let the user enter and edit a URL.

  22. Weak -Lets the user pick a week and a year from a calendar.

ineuroniwritecode