Input

<h1>The input value attribute</h1>
<p>The value attribute specifies an initial value for an input field:</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

<h1>The input readonly attribute</h1>
<p>The readonly attribute specifies that an input field should be read-only (cannot be changed):</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

<h1>The input disabled attribute</h1>
<p>The disabled attribute specifies that an input field should be disabled (unusable and un-clickable):</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

<h1>The input size attribute</h1>
<p>The size attribute specifies the width (in characters) of an input field:</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4"><br><br>
  <input type="submit" value="Submit">
</form>

<h1>The input maxlength attribute</h1>
<p>The maxlength attribute specifies the maximum number of characters allowed in an input field:</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>
  <input type="submit" value="Submit">
</form>

<h1>The input min and max attributes</h1>
<p>The min and max attributes specify the minimum and maximum values for an input element.</p>
<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
  <input type="submit" value="Submit">
</form>

<h1>The input multiple attributes</h1>
<p>The multiple attribute specifies that the user is allowed to enter more than one value in an input field.</p>
<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple><br><br>
  <input type="submit" value="Submit">
</form>
<p>To select multiple files, hold down the CTRL or SHIFT key while selecting.</p>

<h1>The input pattern attribute</h1>
<p>The pattern attribute specifies a regular expression that the input element's value is checked against.</p>
<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
  <input type="submit" value="Submit">
</form>

<h1>The input placeholder attribute</h1>
<p>The placeholder attribute specifies a short hint that describes the expected value of an input field.</p>
<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
  <input type="submit" value="Submit">
</form>

<h1>The input required attribute</h1>
<p>The required attribute specifies that an input field must be filled out before submitting the form.</p>
<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <input type="submit" value="Submit">
</form>

<h1>The input step attribute</h1>
<p>The step attribute specifies the legal number intervals for an input element.</p>
<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
  <input type="submit" value="Submit">
</form>

<h1>The input autofocus attribute</h1>
<p>The autofocus attribute specifies that the input field should automatically get focus when the page loads.</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

<h1>The input list attribute</h1>
<p>The list attribute refers to a datalist element that contains pre-defined options for an input element.</p>
<form>
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit" value="Submit">
</form>

<h1>The autocomplete attribute</h1>
<p>The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.</p>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field!</p>
<form autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>