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">

App preview

HTML Input Types


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"


<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.

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


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>


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: <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: <input type="date" min="2024-01-01"> <br> 
Time: <input type="time" value="01:30">


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:

  value="John Doe" 
  placeholder="Your name" 
  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.