Hello developers 👩‍💻👨‍💻, today I am going to write an article on HTML input types. I know it may seem like a very easy topic, but believe me, if you are a fresher in an interview, they will test your basic knowledge to see if it is clear or not. Therefore, interviewers may ask you questions like "How many types of input are there?" So, let's get started. I will not take up too much of your time, but I will cover this topic quickly and make it interesting with the help of examples.

What is input👩‍💻?

In HTML, input is an element that allows users to enter data or select an option from a set of options.

It is commonly used to create forms and collect user input such as text, numbers, email addresses, passwords, radio buttons, checkboxes, and more.

When a user interacts with an input element, the data entered or the option selected can be used by the website or application to perform various tasks such as processing a payment, submitting a form, or performing a search.

Inputs can be styled and customized using CSS to match the design of the website or application.

✨HTML Input Types

Here are the different input types you can use in HTML:-

• <input type="button">

• <input type="checkbox">

• <input type="color">

• <input type="date">

• <input type="datetime-local">

• <input type="email">

• <input type="file">

• <input type="hidden">

• <input type="image">

• <input type="month">

• <input type="number">

• <input type="password">

• <input type="radio">

• <input type="range">

• <input type="reset">

• <input type="search">

• <input type="submit">

• <input type="tel">

• <input type="text">

• <input type="time">

• <input type="url">

• <input type="week">

• 

Note: The default value of the type attribute is "text".

Example🕶:-

Let's understand we want to create a simple form that allows users to enter their name, email address, and message. We can use the input element to create text fields for name and email, and a textarea element for the message.

Here's an example code snippet:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br>

  <input type="submit" value="Submit">
</form>

In this example, we've used the following input types:

• text for the name input, which allows users to enter text

• email for the email input, which provides validation for email addresses

• textarea for the message input, which allows users to enter multiple lines of text

We've also used the label element to provide a label for each input field, which improves accessibility and usability. The for attribute of the label element is used to associate the label with its corresponding input field using the id attribute of the input element.

Finally, we've added a submit button using the input element with the type attribute set to submit. When the user clicks the submit button, the form data is sent to the server for processing.

form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

input[type="submit"] {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #0062cc;
}

In this example, we've used CSS to style the form, labels, input fields, and submit button. Here are some of the CSS properties we've used:

• max-width, margin, and padding to center the form on the page and add some spacing

• border, border-radius, and box-shadow to add a border and rounded corners to the form

• display: block and margin-bottom to stack the labels and input fields vertically and add some spacing between them

• font-weight: bold to make the labels stand out

• width, padding, margin-bottom, border, and border-radius to style the input fields with a border, rounded corners, and some padding and spacing

• background-color, color, padding, border, border-radius, and cursor to style the submit button with a background color, rounded corners, and a pointer cursor

• :hover to add a hover effect to the submit button when the user hovers over it

I hope this example helps you understand how to style HTML forms with CSS.

I have already listed the input types above. Please feel free to explore more on your own. If you have any questions or want to share your code, you can tag me on LinkedIn or comment your code snippet in the comment box. I hope this article helps you🥰.

🎯 Wrap Up!!

Thank you🤓 for taking the time to read my blog on the basics of HTML Input Types . If you found the information helpful, I would greatly appreciate it if you could share it with others in your professional network. You can easily spread the word through social media by clicking the share buttons below or simply copying and pasting the link. Your support helps me continue creating valuable content for you and others in the community. Thank you again for your help😍!