HTML Code
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>HTML Inputs Example</title>

  <style>

    form { max-width: 400px; }

    input, select, textarea {

      margin: 8px 0 16px;

      padding: 10px;

      border: 1px solid #ddd;

      border-radius: 4px;

      width: 100%;

      box-sizing: border-box;

    }

    label { font-weight: 600; display: block; margin-top: 8px; }

    .inline label { display: inline; font-weight: normal; margin-right: 12px; }

    input[type="submit"] {

      background: #2563eb;

      color: #fff;

      border: none;

      cursor: pointer;

      width: auto;

      padding: 10px 24px;

    }

  </style>

</head>

<body>

  <h1>HTML Inputs Example</h1>

  <form>

    <label for="username">Username</label>

    <input type="text" id="username" name="username" placeholder="Enter your username" required>



    <label for="email">Email</label>

    <input type="email" id="email" name="email" placeholder="Enter your email" required>



    <label for="age">Age</label>

    <input type="number" id="age" name="age" min="0" max="120" placeholder="Enter your age">



    <label for="birthdate">Birthdate</label>

    <input type="date" id="birthdate" name="birthdate">



    <p class="inline">Gender:

      <input type="radio" id="male" name="gender" value="male">

      <label for="male">Male</label>

      <input type="radio" id="female" name="gender" value="female">

      <label for="female">Female</label>

    </p>



    <p class="inline">

      <input type="checkbox" id="subscribe" name="subscribe" value="newsletter">

      <label for="subscribe">Subscribe to newsletter</label>

    </p>



    <label for="resume">Upload Resume</label>

    <input type="file" id="resume" name="resume">



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

  </form>

</body>

</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
HTML Inputs — Complete Form
