Input Form Attributes

Last modified on: October 19, 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="5cba0aea-7949-4de0-a8ff-fa50a68b914e">
<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>Input Form Attributes</h3>
<p>Form attributes define the behavior and characteristics of the form and its controls. Here&rsquo;s a detailed overview of important attributes you can use with HTML forms:</p>
<h3>Form Element Attributes</h3>
<ol>
<li>
<p><strong><code>action</code></strong></p>
<ul>
<li><strong>Description</strong>: Specifies the URL to which the form data will be sent 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;form action="/submit-form"&gt;
  &lt;!-- Form controls here --&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>method</code></strong></p>
<ul>
<li><strong>Description</strong>: Defines the HTTP method to be used when submitting the form (<code>GET</code> or <code>POST</code>).</li>
<li><strong>Values</strong>:
<ul>
<li><code>GET</code>: Appends form data to the URL as query parameters.</li>
<li><code>POST</code>: Sends form data in the body of the HTTP request.</li>
</ul>
</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 method="post" action="/submit-form"&gt;
  &lt;!-- Form controls here --&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>enctype</code></strong></p>
<ul>
<li><strong>Description</strong>: Specifies how the form data should be encoded when submitting it to the server. Useful for file uploads.</li>
<li><strong>Values</strong>:
<ul>
<li><code>application/x-www-form-urlencoded</code>: Default. Encodes form data as key-value pairs.</li>
<li><code>multipart/form-data</code>: Used for file uploads.</li>
<li><code>text/plain</code>: Encodes form data as plain text.</li>
</ul>
</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 enctype="multipart/form-data" action="/upload" method="post"&gt;
  &lt;!-- File input here --&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>target</code></strong></p>
<ul>
<li><strong>Description</strong>: Determines where to open the response after form submission.</li>
<li><strong>Values</strong>:
<ul>
<li><code>_self</code>: Default. Opens the response in the same frame.</li>
<li><code>_blank</code>: Opens the response in a new tab or window.</li>
<li><code>_parent</code>: Opens the response in the parent frame.</li>
<li><code>_top</code>: Opens the response in the full window.</li>
</ul>
</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 target="_blank" action="/submit-form"&gt;
  &lt;!-- Form controls here --&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>name</code></strong></p>
<ul>
<li><strong>Description</strong>: Specifies the name of the form, which can be used to reference it with JavaScript.</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 name="myForm" action="/submit-form"&gt;
  &lt;!-- Form controls here --&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
<li>
<p><strong><code>novalidate</code></strong></p>
<ul>
<li><strong>Description</strong>: Disables the browser&rsquo;s built-in form validation. Useful if you want to handle validation with JavaScript or if the form does not need validation.</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 novalidate action="/submit-form"&gt;
  &lt;!-- Form controls here --&gt;
&lt;/form&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 form fields based on previously entered values.</li>
<li><strong>Values</strong>:
<ul>
<li><code>on</code>: Enables autocomplete.</li>
<li><code>off</code>: Disables autocomplete.</li>
</ul>
</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 autocomplete="off" action="/submit-form"&gt;
  &lt;!-- Form controls here --&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</li>
</ul>
</li>
</ol>
<h3>Input Element Attributes</h3>
<p>For individual <code>&lt;input&gt;</code> elements, several attributes help define their behavior:</p>
<ol>
<li>
<p><strong><code>type</code></strong></p>
<ul>
<li><strong>Description</strong>: Specifies the type of input control (e.g., <code>text</code>, <code>password</code>, <code>email</code>, <code>number</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>: Assigns a name to the input field, which is sent with the form data.</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"&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 field or the value to be sent to the server upon form 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="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 to the user about what should be entered in the input field. The hint is displayed as a gray text within 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" 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 the form can be 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="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 preventing it from being included in the form 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" 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 maximum number of characters that can be entered into 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>: Define the minimum and maximum values for input types like <code>number</code>, <code>range</code>, <code>date</code>, etc.</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 input types like <code>number</code>, <code>range</code>, etc.</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 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 autocomplete the input field.</li>
<li><strong>Values</strong>:
<ul>
<li><code>on</code>: Default. Allows autocomplete.</li>
<li><code>off</code>: Disables autocomplete.</li>
</ul>
</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>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 to use when submitting the form for input elements of type <code>submit</code>.</li>
<li><strong>Values</strong>: <code>get</code>, <code>post</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>Values</strong>:
<ul>
<li><code>_self</code>: Opens in the same frame.</li>
<li><code>_blank</code>: Opens in a new tab or window.</li>
<li><code>_parent</code>: Opens in the parent frame.</li>
<li><code>_top</code>: Opens in the full window.</li>
</ul>
</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 disables form validation.</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>list</code></strong></p>
<ul>
<li><strong>Description</strong>: Refers to a <code>&lt;datalist&gt;</code> element that provides a list of predefined 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>
</ol>
<h3>Conclusion</h3>
<p>By leveraging these attributes, you can customize the behavior and appearance of forms and input elements to suit specific needs. Understanding and using these attributes effectively allows for better user interaction, form validation, and data handling on your web pages.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More