HTML Input

HTML Input

Create custom HTML input forms effortlessly with our online generator. Generate code for text fields, checkboxes, radio buttons, and more. Simplify web development with intuitive customization options.

<input type="text" maxlength="10" size="12">

Input TypesAttributes
App preview

HTML Input Types

Text

HTML text inputs are form elements used to collect textual data from users on a web page. They allow users to enter and edit plain text within a form. Text inputs are defined using the input element with the type attribute set to "text"

Name: 

<input type="text" name="name" size="12" required>

Radio buttons

HTML radio inputs are form elements that allow users to select only one option from a list of choices by clicking on circular buttons, ensuring exclusive selection within a group of options.


<label>
  <input type="radio" name="gender" value="f"> Female
</label><br>
<label>
  <input type="radio" name="gender" value="m" checked> Male
</label>

Checkbox

Allow users to select one or multiple options from a list of choices by clicking on small boxes, typically representing binary options such as "checked" or "unchecked".

<input type="checkbox" name="checkbox" id="terms">
<label for="terms">Do you accept the terms?</label>

Color

Add a graphical color picker, typically represented by a square box displaying the chosen color and providing options to manually input color values or select from a palette.

Color: 

Color: <input type="color" value="#F9425F" name="mycolor">

Date and time

Date and time fields can be used to collect information from users on a web page, providing a user-friendly interface for selecting dates, times, or both, depending on the specific input type chosen.

Date:
Time: 

Date: <input type="date" min="2024-01-01"> <br> 
Time: <input type="time" value="01:30">

Button

Trigger an action or perform a function when clicked by users on a web page, serving as interactive elements to initiate processes such as form submission or JavaScript functions.

<input type="button" value="OK" />

Text HTML Input Types

The input types below resemble text inputs in appearance and behavior but may have specific features or validation related to their intended use.

  1. number: Allows input of a numeric value. A spinner is typically provided for adjusting the value.
  2. email: Used for email addresses, with built-in validation for correct email format.
  3. password: Conceals the input characters for sensitive information such as passwords.
  4. search: Used for search queries, with additional styling and behavior in some browsers.
  5. tel: Intended for telephone numbers, though it's similar to a text input and accepts any text input.
  6. url: Specifically for URLs, providing validation for proper URL format.

HTML Input Tag Attributes

HTML <input> tags can accept a variety of attributes to define their behavior, appearance, and interaction. Some commonly used attributes include:

<input 
  type="text" 
  name="username" 
  id="username" 
  value="John Doe" 
  placeholder="Your name" 
  required 
  maxlength="20" 
  pattern="[A-Za-z]+" 
  autocomplete="username" 
  autofocus 
  style="color: #db3b1d;" />
  1. type: Specifies the type of input (e.g., text, number, email, etc.).
  2. name: Identifies the input field when the form is submitted.
  3. id: Provides a unique identifier for the input element.
  4. value: Sets the initial value of the input field.
  5. placeholder: Provides a hint or example text within the input field.
  6. required: Specifies whether the input field must be filled out before submitting the form.
  7. disabled: Disables the input field, preventing user interaction.
  8. readonly: Makes the input field read-only, preventing user edits.
  9. maxlength: Specifies the maximum number of characters allowed in the input field.
  10. min and max: Specifies the minimum and maximum allowed values for numeric inputs.
  11. pattern: Defines a regular expression pattern for validating the input value.
  12. autocomplete: Specifies whether the browser should automatically complete the input value based on previous inputs or a list of options.
  13. autofocus: the input field automatically receives focus when the page loads and the page scrolls down if necessary.
  14. form: Associates the input field with a specific <form> element.

These attributes help customize the behavior and appearance of HTML input tags to suit the requirements of the form and the desired user experience.