Input Elments
Published: 2022-12-24 15:10:37

<ul>
<li>We will know about the Input element. The input element is used to create form fields that accept user input.</li>
<li>The input tag is used within the form element. It is an empty element that contains only attributes. Let's know the different input types in HTML -</li>
</ul>
<h2 id="heading-html-input-types"><strong>HTML Input types :-</strong></h2>
<h3 id="heading-input-type-text"><strong>Input Type Text :</strong></h3>
<p>This is a default value. It defines a single-line text field. The text input accepts alphanumeric characters for fields like, name, address, etc.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>&gt;</span></span>
</code></pre><h3 id="heading-input-type-password"><strong>Input Type Password :-</strong></h3>
<p>The password input type is used to create an obscured text control.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span>&gt;</span></span>
</code></pre><h3 id="heading-input-type-email"><strong>Input Type Email :-</strong></h3>
<p>This input field is for email where the user enters their email address. This input type has been specifically designed to handle and validate email addresses.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span>&gt;</span></span>
</code></pre><h3 id="heading-input-type-date"><strong>Input Type Date :-</strong></h3>
<p>This input field is for a date. Where the user enters a date, like their date of birth.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"date"</span>&gt;</span></span>
</code></pre><h3 id="heading-input-type-submit"><strong>Input Type Submit :-</strong></h3>
<p>This is a button input that submits the form.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>&gt;</span></span>
</code></pre><h3 id="heading-input-type-file"><strong>Input Type File :-</strong></h3>
<p>This input type specifies a file selection control in which the user selects the file from their device.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"file"</span>&gt;</span></span>
</code></pre><h3 id="heading-input-type-radio"><strong>Input Type Radio :-</strong></h3>
<p>It defines a radio button. in the radio inputs, the user can click only one value at a time.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>&gt;</span></span>
</code></pre><h3 id="heading-input-type-number"><strong>Input Type Number:-</strong></h3>
<p>It defines a field for entering a number. Using this input type, you can enter a value in two ways – from the keyword and by clicking the little up and down buttons provided in the input field.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span>&gt;</span></span>
</code></pre><h3 id="heading-input-type-checkbox"><strong>Input Type Checkbox :-</strong></h3>
<p>It defines a checkbox button. In the input type, the user can select more than one option.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span></span>
</code></pre><h3 id="heading-input-type-search"><strong>Input Type Search:-</strong></h3>
<p>This input type creates a search input field. This field is used to enter a query. You can search whatever you want.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span>&gt;</span></span>
</code></pre><h3 id="heading-input-type-reset"><strong>Input Type Reset:-</strong></h3>
<p>This input type is used to define a reset button. Clicking a reset button will clear all input elements in the form to their original value.</p>
<pre><code>Example :
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"reset"</span>&gt;</span></span>
</code></pre></br><p style="color:#757CF9;">This article is published w/ <a target="_blank" href="https://scattr.io?ref=dev">Scattr  ↗️</a></p>