HTML Input Attributes

Last modified on: October 20, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-[20px] text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="8e408212-a3d5-475d-b0ef-f199bcf574f3">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>HTML Input Attributes</h3>
<p>HTML input elements use various attributes to control their behavior, appearance, and how they interact with users. Here&rsquo;s a detailed overview of the key attributes for the <code>&lt;input&gt;</code> element:</p>
<h3>Common Input Attributes</h3>
<ol>
<li>
<p><strong><code>type</code></strong></p>
<ul>
<li><strong>Description</strong>: Specifies the type of input control to display.</li>
<li><strong>Values</strong>: <code>text</code>, <code>password</code>, <code>email</code>, <code>number</code>, <code>range</code>, <code>date</code>, <code>time</code>, <code>datetime-local</code>, <code>month</code>, <code>week</code>, <code>file</code>, <code>checkbox</code>, <code>radio</code>, <code>submit</code>, <code>reset</code>, <code>button</code>, <code>hidden</code>, <code>image</code></li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" name="username"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>name</code></strong></p>
<ul>
<li><strong>Description</strong>: Defines the name of the input element. This name is used to reference form data after submission.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" name="email"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>value</code></strong></p>
<ul>
<li><strong>Description</strong>: Sets the default value of the input element or the value to be sent to the server when the form is submitted.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" name="username" value="JohnDoe"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>placeholder</code></strong></p>
<ul>
<li><strong>Description</strong>: Provides a hint or example of the expected value for the input field. This text disappears when the user starts typing.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" placeholder="Enter your name"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>required</code></strong></p>
<ul>
<li><strong>Description</strong>: Indicates that the input field must be filled out before submitting the form.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="email" name="email" required&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>readonly</code></strong></p>
<ul>
<li><strong>Description</strong>: Makes the input field read-only, preventing users from modifying its value.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" value="Read-only value" readonly&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>disabled</code></strong></p>
<ul>
<li><strong>Description</strong>: Disables the input field, making it unmodifiable and un-submittable.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" value="Disabled value" disabled&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>maxlength</code></strong></p>
<ul>
<li><strong>Description</strong>: Limits the number of characters that can be entered in the input field.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" maxlength="10"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>min</code></strong> and <strong><code>max</code></strong></p>
<ul>
<li><strong>Description</strong>: For <code>number</code>, <code>range</code>, <code>date</code>, and similar input types, these specify the minimum and maximum allowable values.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="number" min="1" max="10"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>step</code></strong></p>
<ul>
<li><strong>Description</strong>: Defines the legal number intervals for an input field of type <code>number</code>, <code>range</code>, or similar.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="number" step="0.1"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>pattern</code></strong></p>
<ul>
<li><strong>Description</strong>: Specifies a regular expression that the input value must match for the input to be considered valid.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" pattern="[A-Za-z]{3,}"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>autocomplete</code></strong></p>
<ul>
<li><strong>Description</strong>: Controls whether the browser should automatically complete the field based on past input. Values include <code>on</code> (default) and <code>off</code>.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" autocomplete="off"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>size</code></strong></p>
<ul>
<li><strong>Description</strong>: Defines the width of the input field in characters.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" size="30"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>multiple</code></strong></p>
<ul>
<li><strong>Description</strong>: Allows multiple selections for input types like <code>file</code> or <code>email</code>. For file inputs, it lets users select more than one file.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="file" multiple&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>list</code></strong></p>
<ul>
<li><strong>Description</strong>: Refers to a <code>&lt;datalist&gt;</code> element that provides a list of options for the input field.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" list="browsers"&gt;
&lt;datalist id="browsers"&gt;
  &lt;option value="Chrome"&gt;
  &lt;option value="Firefox"&gt;
  &lt;option value="Safari"&gt;
&lt;/datalist&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>minlength</code></strong> and <strong><code>maxlength</code></strong></p>
<ul>
<li><strong>Description</strong>: Specify the minimum and maximum number of characters for <code>text</code>, <code>password</code>, and similar input types.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="text" minlength="5" maxlength="20"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>form</code></strong></p>
<ul>
<li><strong>Description</strong>: Associates the input element with a specific <code>&lt;form&gt;</code> element using its <code>id</code>.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;form id="myForm"&gt;
  &lt;input type="text" name="username" form="myForm"&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>formaction</code></strong></p>
<ul>
<li><strong>Description</strong>: Specifies the URL for form submission for input elements of type <code>submit</code>, overriding the <code>action</code> attribute of the form.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="submit" value="Submit" formaction="/submit-form"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>formmethod</code></strong></p>
<ul>
<li><strong>Description</strong>: Specifies the HTTP method (e.g., <code>GET</code>, <code>POST</code>) to be used when submitting the form for input elements of type <code>submit</code>.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="submit" value="Submit" formmethod="post"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>formtarget</code></strong></p>
<ul>
<li><strong>Description</strong>: Specifies where to open the response after form submission for input elements of type <code>submit</code>.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="submit" value="Submit" formtarget="_blank"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>formnovalidate</code></strong></p>
<ul>
<li><strong>Description</strong>: For input elements of type <code>submit</code>, it prevents form validation before submitting.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="submit" value="Submit" formnovalidate&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>formaction</code></strong></p>
<ul>
<li><strong>Description</strong>: Specifies the URL to send the form data to when the form is submitted, overriding the <code>action</code> attribute of the form element.</li>
<li><strong>Example</strong>:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;input type="submit" value="Submit" formaction="/another-url"&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
</ol>
<h3>Conclusion</h3>
<p>HTML input attributes allow you to fine-tune the behavior and appearance of form elements to meet specific needs. By understanding and applying these attributes effectively, you can create forms that are both functional and user-friendly, ensuring that data is collected and validated correctly.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More