HTML Input Types

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="3db0d969-b2b8-4d3c-8012-7fdace2cd506">
<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 Types</h3>
<p>The <code>&lt;input&gt;</code> element in HTML is versatile and can be used to create various types of input fields. The <code>type</code> attribute of the <code>&lt;input&gt;</code> element specifies the kind of input control to be displayed. Here&rsquo;s a detailed overview of the different <code>input</code> types available:</p>
<h3>1. <strong><code>text</code></strong></h3>
<ul>
<li><strong>Description</strong>: A single-line text input field.</li>
<li><strong>Usage</strong>: For entering simple text.</li>
</ul>
<p><strong>Example:</strong></p>
<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" placeholder="Enter your username"&gt;</code></pre>
</div>
</div>
<h3>2. <strong><code>password</code></strong></h3>
<ul>
<li><strong>Description</strong>: A single-line text input field where the characters are obscured.</li>
<li><strong>Usage</strong>: For entering passwords.</li>
</ul>
<p><strong>Example:</strong></p>
<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="password" name="password" placeholder="Enter your password"&gt;</code></pre>
</div>
</div>
<h3>3. <strong><code>email</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field for entering an email address, with built-in validation.</li>
<li><strong>Usage</strong>: For email addresses.</li>
</ul>
<p><strong>Example:</strong></p>
<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" placeholder="Enter your email"&gt;</code></pre>
</div>
</div>
<h3>4. <strong><code>number</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field for entering numeric values. Allows you to specify a range and step values.</li>
<li><strong>Usage</strong>: For numbers, including decimal values.</li>
</ul>
<p><strong>Example:</strong></p>
<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" name="quantity" min="1" max="10" step="1"&gt;</code></pre>
</div>
</div>
<h3>5. <strong><code>range</code></strong></h3>
<ul>
<li><strong>Description</strong>: A slider control for selecting a value from a specified range.</li>
<li><strong>Usage</strong>: For selecting values between a minimum and maximum value.</li>
</ul>
<p><strong>Example:</strong></p>
<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="range" name="volume" min="0" max="100" step="1"&gt;</code></pre>
</div>
</div>
<h3>6. <strong><code>date</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field for selecting a date from a date picker.</li>
<li><strong>Usage</strong>: For selecting dates.</li>
</ul>
<p><strong>Example:</strong></p>
<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="date" name="birthday"&gt;</code></pre>
</div>
</div>
<h3>7. <strong><code>time</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field for selecting a time (hours and minutes).</li>
<li><strong>Usage</strong>: For selecting times.</li>
</ul>
<p><strong>Example:</strong></p>
<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="time" name="appointment"&gt;</code></pre>
</div>
</div>
<h3>8. <strong><code>datetime-local</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field for selecting both date and time (without timezone).</li>
<li><strong>Usage</strong>: For selecting both date and time.</li>
</ul>
<p><strong>Example:</strong></p>
<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="datetime-local" name="event"&gt;</code></pre>
</div>
</div>
<h3>9. <strong><code>month</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field for selecting a month and year.</li>
<li><strong>Usage</strong>: For selecting months and years.</li>
</ul>
<p><strong>Example:</strong></p>
<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="month" name="monthYear"&gt;</code></pre>
</div>
</div>
<h3>10. <strong><code>week</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field for selecting a week and year.</li>
<li><strong>Usage</strong>: For selecting weeks.</li>
</ul>
<p><strong>Example:</strong></p>
<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="week" name="week"&gt;</code></pre>
</div>
</div>
<h3>11. <strong><code>file</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field for selecting one or more files to upload.</li>
<li><strong>Usage</strong>: For file uploads.</li>
</ul>
<p><strong>Example:</strong></p>
<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" name="resume"&gt;</code></pre>
</div>
</div>
<h3>12. <strong><code>checkbox</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field for selecting one or more options from a set of options.</li>
<li><strong>Usage</strong>: For options that can be toggled on or off.</li>
</ul>
<p><strong>Example:</strong></p>
<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="checkbox" name="subscribe" value="newsletter"&gt; Subscribe to newsletter</code></pre>
</div>
</div>
<h3>13. <strong><code>radio</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field for selecting one option from a set of options.</li>
<li><strong>Usage</strong>: For exclusive choices (only one option can be selected).</li>
</ul>
<p><strong>Example:</strong></p>
<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="radio" name="gender" value="male"&gt; Male
&lt;input type="radio" name="gender" value="female"&gt; Female</code></pre>
</div>
</div>
<h3>14. <strong><code>submit</code></strong></h3>
<ul>
<li><strong>Description</strong>: A button that submits the form.</li>
<li><strong>Usage</strong>: To submit the form data.</li>
</ul>
<p><strong>Example:</strong></p>
<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"&gt;</code></pre>
</div>
</div>
<h3>15. <strong><code>reset</code></strong></h3>
<ul>
<li><strong>Description</strong>: A button that resets all form fields to their default values.</li>
<li><strong>Usage</strong>: To clear form inputs.</li>
</ul>
<p><strong>Example:</strong></p>
<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="reset" value="Reset"&gt;
</code></pre>
</div>
</div>
<h3>16. <strong><code>button</code></strong></h3>
<ul>
<li><strong>Description</strong>: A generic button that can perform custom actions when clicked.</li>
<li><strong>Usage</strong>: For custom functionality (JavaScript actions).</li>
</ul>
<p><strong>Example:</strong></p>
<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="button" value="Click Me" onclick="alert('Button clicked!')"&gt;</code></pre>
</div>
</div>
<h3>17. <strong><code>hidden</code></strong></h3>
<ul>
<li><strong>Description</strong>: A field that is not visible to the user but can hold data that is sent with the form.</li>
<li><strong>Usage</strong>: For storing data that should be included in the form submission but not displayed.</li>
</ul>
<p><strong>Example:</strong></p>
<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="hidden" name="token" value="12345"&gt;</code></pre>
</div>
</div>
<h3>18. <strong><code>image</code></strong></h3>
<ul>
<li><strong>Description</strong>: A submit button that displays an image.</li>
<li><strong>Usage</strong>: For submitting forms with an image button.</li>
</ul>
<p><strong>Example:</strong></p>
<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="image" src="submit.png" alt="Submit"&gt;</code></pre>
</div>
</div>
<h3>Conclusion</h3>
<p>Each HTML input type serves a specific purpose and provides various ways for users to interact with forms. By selecting the appropriate input type, you can enhance user experience, enforce data validation, and ensure that the data collected is in the correct format. Understanding and utilizing these input types effectively allows you to create functional and user-friendly forms on your web pages.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More

HTML Input Types

Learn Ansible

Learn HTML

Learn Angular 3

Learn PHP

Learn Angular 2.0

Learn Python

Learn C# Sharp

Learn CSS

Learn Node Js

Learn PHP 7.1

Learn Angular 3

Learn Angular 2

Learn HTML5

Learn Angular 2

Learn Angular 3.0

Learn Bootstrap 3

Learn Bootstrap 4

Learn Bootstrap 5