{"id":111,"date":"2024-10-07T05:35:21","date_gmt":"2024-10-07T05:35:21","guid":{"rendered":"https:\/\/techkubo.com\/html\/?p=111"},"modified":"2025-05-10T03:45:21","modified_gmt":"2025-05-10T03:45:21","slug":"html-input-types","status":"publish","type":"post","link":"https:\/\/techkubo.com\/html\/html-input-types\/","title":{"rendered":"HTML Input Types"},"content":{"rendered":"\n

The <input><\/code> tag has various type<\/code> attributes that let you customize the kind of input you want from users, such as text, password, email, number, checkbox, and radio. Each type has unique properties that help enhance user experience.<\/p>\n\n\n\n

<\/p>\n\n\n\n

HTML Input Types Syntax<\/strong><\/h2>\n\n\n\n

Explanation of Syntax:<\/strong><\/p>\n\n\n\n

    \n
  • type=\"text\"<\/code><\/strong>: A standard single-line text field.<\/li>\n\n\n\n
  • type=\"password\"<\/code><\/strong>: A field where the input text is hidden, suitable for passwords.<\/li>\n\n\n\n
  • type=\"email\"<\/code><\/strong>: A field optimized for email addresses.<\/li>\n\n\n\n
  • type=\"checkbox\"<\/code><\/strong>: Allows multiple selections.<\/li>\n\n\n\n
  • type=\"radio\"<\/code><\/strong>: Used for single-choice options, with value<\/code> to differentiate each choice.<\/li>\n<\/ul>\n\n\n\n
    <input type="text" name="username">\n<input type="password" name="password">\n<input type="email" name="user_email">\n<input type="checkbox" name="subscribe">\n<input type="radio" name="gender" value="male"><\/pre><\/div>\n\n\n\n
    <\/p>\n\n\n\n
    HTML Input Types Example Code<\/strong><\/h2>\n\n\n\n
    Explanation of Code:<\/strong><\/p>\n\n\n\n
      \n
    • type=\"text\"<\/code> and type=\"password\"<\/code><\/strong>: Common inputs for usernames and passwords.<\/li>\n\n\n\n
    • type=\"email\"<\/code><\/strong>: The browser may validate that the input looks like an email address.<\/li>\n\n\n\n
    • type=\"checkbox\"<\/code><\/strong>: Used for options like subscriptions, where the user can choose to select or not.<\/li>\n<\/ul>\n\n\n\n
      <!DOCTYPE html>\n<html>\n  <head>\n    <title>HTML Input Types Example<\/title>\n  <\/head>\n  <body>\n    <h1>Account Setup<\/h1>\n    <form>\n      <label for="username">Username:<\/label>\n      <input type="text" id="username" name="username" placeholder="Username">\n      \n      <label for="password">Password:<\/label>\n      <input type="password" id="password" name="password" placeholder="Password">\n      \n      <label>Email:<\/label>\n      <input type="email" name="email" placeholder="Email Address">\n      \n      <label>Subscribe to Newsletter:<\/label>\n      <input type="checkbox" name="subscribe">\n      \n      <button type="submit">Register<\/button>\n    <\/form>\n  <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      <\/p>\n\n\n\n
      HTML Labs<\/strong><\/h2>\n\n\n\n