HTML Form Elements

---

This chapter describes all the different HTML form elements.

---

The HTML

Elements

The HTML <form> element can contain one or more of the following form elements:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

---

The Element

One of the most used form elements is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

Example

  <label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

All the different values of the type attribute are covered in the next chapter: HTML Input Types.

---

The Element

The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

---

The Element

The <select> element defines a drop-down list:

Example

  <label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>

 <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>

 <option value="audi">Audi</option>
</select>

The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Example

<option value="fiat" selected>Fiat</option>

Visible Values:

Use the size attribute to specify the number of visible values:

Example

  <label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>

 <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>

 <option value="audi">Audi</option>
</select>

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

Example

  <label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>

 <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>

 <option value="audi">Audi</option>
</select>

---

The Element</h2> <p>The <code><textarea></code> element defines a multi-line input field (a text area):</p> <h3>Example</h3> <pre><code class="language-html"> <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> </code></pre> <p>The <code>rows</code> attribute specifies the visible number of lines in a text area.</p> <p>The <code>cols</code> attribute specifies the visible width of a text area.</p> <p>This is how the HTML code above will be displayed in a browser:</p> <p>You can also define the size of the text area by using CSS:</p> <h3>Example</h3> <pre><code class="language-html"> <textarea name="message" style="width:200px; height:600px;"> The cat was playing in the garden. </textarea> </code></pre> <hr> <h2 id="the-element-5">The <button> Element</h2> <p>The <code><button></code> element defines a clickable button:</p> <h3>Example</h3> <pre><code class="language-html"><button type="button" onclick="alert('Hello World!')">Click Me!</button> </code></pre> <p>This is how the HTML code above will be displayed in a browser:</p> <blockquote> <p><strong>Note:</strong> Always specify the <code>type</code> attribute for the button element. Different browsers may use different default types for the button element.</p> </blockquote> <hr> <h2 id="the-and-elements">The <fieldset> and <legend> Elements</h2> <p>The <code><fieldset></code> element is used to group related data in a form.</p> <p>The <code><legend></code> element defines a caption for the <code> <fieldset></code> element.</p> <h3>Example</h3> <pre><code class="language-html"> <form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <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"> </fieldset> </form> </code></pre> <p>This is how the HTML code above will be displayed in a browser:</p> <hr> <h2 id="the-element-7">The <datalist> Element</h2> <p>The <code><datalist></code> element specifies a list of pre-defined options for an <code><input></code> element.</p> <p>Users will see a drop-down list of the pre-defined options as they input data.</p> <p>The <code>list</code> attribute of the <code><input></code> element, must refer to the <code>id</code> attribute of the <code><datalist></code> element.</p> <h3>Example</h3> <pre><code class="language-html"><form action="/action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> </code></pre> <hr> <h2 id="the-element-8">The <output> Element</h2> <p>The <code><output></code> element represents the result of a calculation (like one performed by a script).</p> <h3>Example</h3> <pre><code class="language-html"> <form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> </code></pre> <hr> <h2 id="html-form-elements">HTML Form Elements</h2> <table> <thead> <tr> <th>Tag</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><form></td> <td>Defines an HTML form for user input</td> </tr> <tr> <td><input></td> <td>Defines an input control</td> </tr> <tr> <td><textarea></td> <td>Defines a multiline input control (text area)</td> </tr> <tr> <td><label></td> <td>Defines a label for an <input> element</td> </tr> <tr> <td><fieldset></td> <td>Groups related elements in a form</td> </tr> <tr> <td><legend></td> <td>Defines a caption for a <fieldset> element</td> </tr> <tr> <td><select></td> <td>Defines a drop-down list</td> </tr> <tr> <td><optgroup></td> <td>Defines a group of related options in a drop-down list</td> </tr> <tr> <td><option></td> <td>Defines an option in a drop-down list</td> </tr> <tr> <td><button></td> <td>Defines a clickable button</td> </tr> <tr> <td><datalist></td> <td>Specifies a list of pre-defined options for input controls</td> </tr> <tr> <td><output></td> <td>Defines the result of a calculation</td> </tr> </tbody> </table> <blockquote> <p><strong>Note:</strong> For a complete list of all available HTML tags, visit our HTML Tag Reference.</p> </blockquote> </div><div class="share-bar"><strong>Share:</strong><a href="https://wa.me/?text=HTML%20Form%20Elements%20https%3A%2F%2Fwww.aivasu.com%2Fnotes%2Fhtml%2Fhtml-form-elements%2F" target="_blank" rel="noopener" class="share-btn s-wa"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg> WhatsApp</a><a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.aivasu.com%2Fnotes%2Fhtml%2Fhtml-form-elements%2F&title=HTML%20Form%20Elements" target="_blank" rel="noopener" class="share-btn s-li"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg> LinkedIn</a><a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.aivasu.com%2Fnotes%2Fhtml%2Fhtml-form-elements%2F&text=HTML%20Form%20Elements" target="_blank" rel="noopener" class="share-btn s-cp"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg> Copy / Share</a></div></div><div class="prevnext"><a class="pn-btn pn-prev" href="/notes/html/html-form-attributes"><span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg> Previous</span><strong>HTML Form Attributes</strong></a><a class="pn-btn pn-next" href="/notes/html/html-input-types"><span class="inline-flex items-center gap-1">Next <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span><strong>HTML Input Types</strong></a></div><div class="note-cta"><h3>Want to go beyond the notes?</h3><p>Join Aivasu Tech Institute's <!-- -->HTML<!-- --> course — live mentorship, real projects, and 100% placement support.</p><a href="/enroll-now">Enroll Now — Free Demo Available</a></div></div><aside class="topics-side"><h4>HTML<!-- --> Notes — All Topics</h4><div class="ts-group"><div class="ts-group-label">HTML Forms</div><a class="ts-item " href="/notes/html/html-forms"><span class="ts-num">60</span><span class="ts-title">HTML Forms</span></a><a class="ts-item " href="/notes/html/html-form-attributes"><span class="ts-num">61</span><span class="ts-title">HTML Form Attributes</span></a><a class="ts-item active" href="/notes/html/html-form-elements"><span class="ts-num">62</span><span class="ts-title">HTML Form Elements</span></a><a class="ts-item " href="/notes/html/html-input-types"><span class="ts-num">63</span><span class="ts-title">HTML Input Types</span></a><a class="ts-item " href="/notes/html/html-input-attributes"><span class="ts-num">64</span><span class="ts-title">HTML Input Attributes</span></a><a class="ts-item " href="/notes/html/input-form-attributes"><span class="ts-num">65</span><span class="ts-title">Input Form Attributes</span></a></div><div class="ts-other-cats"><span class="ts-other-label">Other sections</span><nav><a class="ts-other-link" href="/notes/html#cat-html-tutorial"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>HTML Tutorial<!-- --> (<!-- -->59<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-html-graphics"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>HTML Graphics<!-- --> (<!-- -->2<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-html-media"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>HTML Media<!-- --> (<!-- -->5<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-html-apis"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>HTML APIs<!-- --> (<!-- -->6<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-more-basics"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-blocks" aria-hidden="true"><path d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"></path><rect x="14" y="2" width="8" height="8" rx="1"></rect></svg>HTML Basics<!-- --> (<!-- -->12<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-more-text"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pen-line" aria-hidden="true"><path d="M13 21h8"></path><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path></svg>Text & Content<!-- --> (<!-- -->19<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-more-links"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link2 lucide-link-2" aria-hidden="true"><path d="M9 17H7A5 5 0 0 1 7 7h2"></path><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1="8" x2="16" y1="12" y2="12"></line></svg>Links<!-- --> (<!-- -->12<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-more-images"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg>Images<!-- --> (<!-- -->10<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-more-lists"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-list" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>Lists<!-- --> (<!-- -->6<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-more-tables"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>Tables<!-- --> (<!-- -->13<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-more-forms"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-receipt" aria-hidden="true"><path d="M12 17V7"></path><path d="M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8"></path><path d="M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"></path></svg>HTML Forms<!-- --> (<!-- -->31<!-- -->)</a><a class="ts-other-link" href="/notes/html#cat-more-semantic"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag" aria-hidden="true"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle></svg>Semantic HTML<!-- --> (<!-- -->16<!-- -->)</a></nav></div></aside></div><section class="cn-faq-section" aria-label="HTML Form Elements – FAQs"><script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What does this HTML Form Elements note cover?","acceptedAnswer":{"@type":"Answer","text":"This free note from Aivasu Tech Institute explains HTML Form Elements in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews."}},{"@type":"Question","name":"Is this HTML Form Elements tutorial free?","acceptedAnswer":{"@type":"Answer","text":"Yes. Every HTML topic on Aivasu Tech Institute, including HTML Form Elements, is 100% free with no signup required."}},{"@type":"Question","name":"How long does it take to learn HTML Form Elements?","acceptedAnswer":{"@type":"Answer","text":"With focused practice, most students grasp HTML Form Elements in 1–3 days from these notes; pairing it with Aivasu Tech Institute's mentor-led course takes you to job-ready depth faster."}},{"@type":"Question","name":"Where can I practise HTML Form Elements after reading?","acceptedAnswer":{"@type":"Answer","text":"Use the code examples in this note, then ask doubts for free on the Aivasu Tech Institute Community (/community) — expert instructors answer within 24 hours."}}]}</script><div class="cn-faq-inner"><p class="text-center font-mono text-[10.5px] sm:text-xs uppercase tracking-[0.25em] sm:tracking-[0.35em] text-[#202A26]/50">✳ Common questions</p><h2 class="cn-faq-title">HTML Form Elements – <span class="font-serif italic font-normal">FAQs</span></h2><p class="cn-faq-sub">Quick answers about learning HTML Form Elements in HTML.</p><div class="cn-faq-list border-b border-[#202A26]/10"><div class="w-full"><div data-state="closed" class="border-t border-[#202A26]/10 transition-colors"><button type="button" aria-expanded="false" class="flex w-full items-center justify-between gap-4 py-5 text-left text-base font-semibold tracking-tight text-[#202A26] transition-colors hover:text-[#202A26]/70"><span class="flex-1 min-w-0"><div class="flex items-start gap-3 sm:gap-4.5 text-left min-w-0"><span class="shrink-0 font-mono text-[11px] sm:text-xs tracking-[0.2em] text-[#202A26]/45 pt-0.5 select-none">01</span><span class="flex-1 text-[15px] sm:text-base md:text-[17px] font-semibold leading-snug tracking-tight text-[#202A26] break-words">What does this HTML Form Elements note cover?</span></div></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-4 shrink-0 text-[#202A26]/50 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div data-state="closed" class="grid transition-all duration-300 ease-in-out text-sm text-[#202A26]/75 grid-rows-[0fr] opacity-0"><div class="overflow-hidden"><div class="pb-6 pr-6 pt-1 leading-relaxed">This free note from Aivasu Tech Institute explains HTML Form Elements in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews.</div></div></div></div><div data-state="closed" class="border-t border-[#202A26]/10 transition-colors"><button type="button" aria-expanded="false" class="flex w-full items-center justify-between gap-4 py-5 text-left text-base font-semibold tracking-tight text-[#202A26] transition-colors hover:text-[#202A26]/70"><span class="flex-1 min-w-0"><div class="flex items-start gap-3 sm:gap-4.5 text-left min-w-0"><span class="shrink-0 font-mono text-[11px] sm:text-xs tracking-[0.2em] text-[#202A26]/45 pt-0.5 select-none">02</span><span class="flex-1 text-[15px] sm:text-base md:text-[17px] font-semibold leading-snug tracking-tight text-[#202A26] break-words">Is this HTML Form Elements tutorial free?</span></div></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-4 shrink-0 text-[#202A26]/50 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div data-state="closed" class="grid transition-all duration-300 ease-in-out text-sm text-[#202A26]/75 grid-rows-[0fr] opacity-0"><div class="overflow-hidden"><div class="pb-6 pr-6 pt-1 leading-relaxed">Yes. Every HTML topic on Aivasu Tech Institute, including HTML Form Elements, is 100% free with no signup required.</div></div></div></div><div data-state="closed" class="border-t border-[#202A26]/10 transition-colors"><button type="button" aria-expanded="false" class="flex w-full items-center justify-between gap-4 py-5 text-left text-base font-semibold tracking-tight text-[#202A26] transition-colors hover:text-[#202A26]/70"><span class="flex-1 min-w-0"><div class="flex items-start gap-3 sm:gap-4.5 text-left min-w-0"><span class="shrink-0 font-mono text-[11px] sm:text-xs tracking-[0.2em] text-[#202A26]/45 pt-0.5 select-none">03</span><span class="flex-1 text-[15px] sm:text-base md:text-[17px] font-semibold leading-snug tracking-tight text-[#202A26] break-words">How long does it take to learn HTML Form Elements?</span></div></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-4 shrink-0 text-[#202A26]/50 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div data-state="closed" class="grid transition-all duration-300 ease-in-out text-sm text-[#202A26]/75 grid-rows-[0fr] opacity-0"><div class="overflow-hidden"><div class="pb-6 pr-6 pt-1 leading-relaxed">With focused practice, most students grasp HTML Form Elements in 1–3 days from these notes; pairing it with Aivasu Tech Institute's mentor-led course takes you to job-ready depth faster.</div></div></div></div><div data-state="closed" class="border-t border-[#202A26]/10 transition-colors"><button type="button" aria-expanded="false" class="flex w-full items-center justify-between gap-4 py-5 text-left text-base font-semibold tracking-tight text-[#202A26] transition-colors hover:text-[#202A26]/70"><span class="flex-1 min-w-0"><div class="flex items-start gap-3 sm:gap-4.5 text-left min-w-0"><span class="shrink-0 font-mono text-[11px] sm:text-xs tracking-[0.2em] text-[#202A26]/45 pt-0.5 select-none">04</span><span class="flex-1 text-[15px] sm:text-base md:text-[17px] font-semibold leading-snug tracking-tight text-[#202A26] break-words">Where can I practise HTML Form Elements after reading?</span></div></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-4 shrink-0 text-[#202A26]/50 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div data-state="closed" class="grid transition-all duration-300 ease-in-out text-sm text-[#202A26]/75 grid-rows-[0fr] opacity-0"><div class="overflow-hidden"><div class="pb-6 pr-6 pt-1 leading-relaxed">Use the code examples in this note, then ask doubts for free on the Aivasu Tech Institute Community (/community) — expert instructors answer within 24 hours.</div></div></div></div></div></div></div></section></main><!--$--><!--/$--></div></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:I[39756,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"LoadingBoundaryProvider\"]\n2:\"$Sreact.fragment\"\n3:I[79520,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/0qmc2eu56a_hq.css\",\"style\"]\n:HL[\"/_next/static/chunks/0_qmdxypjebtc.css\",\"style\"]\n:HL[\"/_next/static/chunks/06e9u1z1ch22m.css\",\"style\"]\n:HL[\"/_next/static/media/47fe1b7cd6e6ed85-s.p.0~mcdl10zdfb3.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/829ba4228c966254-s.p.0ub.k0om~_-xi.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/8e6fa89aa22d24ec-s.p.0uvzar8hswo3p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/a218039a3287bcfd-s.p.17-1enzs_j91b.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e2334d715941921e-s.p.12skym0rqknxy.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n4:Tac0,"])</script><script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"@id\":\"https://www.aivasu.com/#website\",\"name\":\"Aivasu Tech Institute\",\"alternateName\":[\"Aivasu\",\"Aivasu\",\"Aivasu – Gurukul of AI\",\"Aivasu Gurukul of AI\",\"Aivasu Gurukul of AI\",\"Aivasu Tech Institute: Gurukul of AI\",\"Aivasu – Tech Institute\",\"Aivasu Tech Institute\",\"Aivasu Tech Institute\",\"Aivasu Pitampura\",\"Aivasu Pitampura\"],\"url\":\"https://www.aivasu.com\",\"inLanguage\":\"en-IN\",\"publisher\":{\"@id\":\"https://www.aivasu.com/#organization\"},\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://www.aivasu.com/community/search?q={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}},{\"@context\":\"https://schema.org\",\"@type\":[\"LocalBusiness\",\"EducationalOrganization\"],\"@id\":\"https://www.aivasu.com/#organization\",\"name\":\"Aivasu Tech Institute\",\"alternateName\":[\"Aivasu\",\"Aivasu\",\"Aivasu – Gurukul of AI\",\"Aivasu Gurukul of AI\",\"Aivasu Gurukul of AI\",\"Aivasu Tech Institute: Gurukul of AI\",\"Aivasu – Tech Institute\",\"Aivasu Tech Institute\",\"Aivasu Tech Institute\",\"Aivasu Pitampura\",\"Aivasu Pitampura\"],\"slogan\":\"Tech Institute\",\"description\":\"Aivasu Tech Institute is a coding and AI institute in Pitampura, Delhi offering AI, Full Stack, Data Science, Cloud Computing \u0026 Cybersecurity courses with 100% placement support.\",\"image\":\"https://www.aivasu.com/aivasulogo1.svg\",\"logo\":\"https://www.aivasu.com/aivasulogo1.svg\",\"url\":\"https://www.aivasu.com\",\"telephone\":\"+91-9667708830\",\"email\":\"info@aivasu.com\",\"address\":{\"@type\":\"PostalAddress\",\"streetAddress\":\"2nd Floor, Kapil Vihar, Opp. Metro Pillar No.354, Pitampura\",\"addressLocality\":\"New Delhi\",\"addressRegion\":\"Delhi\",\"postalCode\":\"110034\",\"addressCountry\":\"IN\"},\"contactPoint\":{\"@type\":\"ContactPoint\",\"telephone\":\"+91-9667708830\",\"contactType\":\"customer service\",\"email\":\"info@aivasu.com\",\"availableLanguage\":[\"English\",\"Hindi\"]},\"sameAs\":[\"https://www.google.com/maps?cid=8721177965519775187\",\"https://www.linkedin.com/company/codingnow-in\",\"https://www.instagram.com/codingnow\",\"https://www.facebook.com/codingnow\",\"https://www.youtube.com/@codingnowai\",\"https://twitter.com/codingnow\"],\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":28.699913,\"longitude\":77.1366043},\"hasMap\":\"https://www.google.com/maps?cid=8721177965519775187\",\"openingHoursSpecification\":{\"@type\":\"OpeningHoursSpecification\",\"dayOfWeek\":[\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\"],\"opens\":\"09:00\",\"closes\":\"19:00\"},\"priceRange\":\"₹₹\",\"areaServed\":[{\"@type\":\"City\",\"name\":\"Delhi\"},{\"@type\":\"AdministrativeArea\",\"name\":\"Delhi NCR\"}],\"keywords\":\"Aivasu Tech Institute, Aivasu, Aivasu Pitampura, best coding institute Delhi, AI courses Delhi\"}]}"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"notes\",\"html\",\"html-form-elements\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"notes\",{\"children\":[[\"slug\",\"html\",\"d\",null],{\"children\":[[\"topic\",\"html-form-elements\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",20],[[\"$\",\"$L1\",null,{\"loading\":[[\"$\",\"main\",\"l\",{\"className\":\"flex min-h-[60svh] items-center justify-center bg-[#FAF9F6]\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 animate-pulse rounded-full bg-[#202A26]\"}],[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 animate-pulse rounded-full bg-[#202A26] [animation-delay:150ms]\"}],[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 animate-pulse rounded-full bg-[#202A26] [animation-delay:300ms]\"}]]}]}],[],[]],\"children\":[\"$\",\"$2\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0qmc2eu56a_hq.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0_qmdxypjebtc.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/063f_5235lgpz.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/14_gzd_rqlc_c.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"data-theme\":\"light\",\"data-scroll-behavior\":\"smooth\",\"className\":\"poppins_2e4530c2-module__1Mn2RG__variable\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://static.cloudflareinsights.com\"}],[\"$\",\"$L3\",null,{\"id\":\"codingnow-theme\",\"strategy\":\"beforeInteractive\",\"children\":\"try{const theme=localStorage.getItem(\\\"codingnow-theme\\\");document.documentElement.dataset.theme=theme===\\\"dark\\\"?\\\"dark\\\":\\\"light\\\"}catch{document.documentElement.dataset.theme=\\\"light\\\"}\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$4\"}}]]}],\"$L5\"]}]]}]}],{\"children\":[\"$L6\",{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,null]},null,false,\"$@a\"]},null,false,\"$@a\"]},null,false,null]},null,false,null],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[\"$Ld\",\"$Le\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"ICQHDF0yfDAf89jbdAY_W\"}\n"])</script><script>self.__next_f.push([1,"f:I[42364,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"default\"]\n10:I[70119,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"default\"]\n11:I[22016,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\",\"/_next/static/chunks/00mc57ok_31ai.js\"],\"\"]\n12:I[85437,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\",\"/_next/static/chunks/00mc57ok_31ai.js\"],\"Image\"]\n13:I[5014,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\",\"/_next/static/chunks/00mc57ok_31ai.js\"],\"default\"]\n14:I[49478,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"default\"]\n21:I[39756,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"default\"]\n22:I[37457,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"default\"]\n24:I[97367,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"OutletBoundary\"]\n25:\"$Sreact.suspense\"\n28:I[97367,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"ViewportBoundary\"]\n2a:I[97367,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"MetadataBoundary\"]\n15:T7c4,"])</script><script>self.__next_f.push([1,"M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"])</script><script>self.__next_f.push([1,"5:[\"$\",\"body\",null,{\"children\":[[\"$\",\"$Lf\",null,{\"header\":[\"$\",\"$L10\",null,{}],\"footer\":[\"$\",\"footer\",null,{\"className\":\"footer-pro\",\"children\":[[\"$\",\"div\",null,{\"className\":\"site-container\",\"children\":[\"$\",\"div\",null,{\"className\":\"footer-pro-wrapper\",\"children\":[[\"$\",\"div\",null,{\"className\":\"footer-brand\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"brand brand-light\",\"aria-label\":\"Aivasu Tech Institute home\",\"children\":[[\"$\",\"$L12\",null,{\"src\":\"/aivasulogo1.svg\",\"alt\":\"Aivasu Tech Institute Logo\",\"width\":160,\"height\":60,\"className\":\"h-9 w-auto object-contain\"}],[\"$\",\"h2\",null,{\"children\":\"Aivasu Tech Institute\"}]]}],[\"$\",\"p\",null,{\"children\":\"India's premier AI \u0026 Full Stack training institute — bridging the gap between education and industry with hands-on mentorship and 100% placement support.\"}],[\"$\",\"div\",null,{\"className\":\"footer-address\",\"children\":[[\"$\",\"div\",null,{\"className\":\"addr-icon\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\",\"key\":\"1r0f0z\"}],[\"circle\",{\"cx\":\"12\",\"cy\":\"10\",\"r\":\"3\",\"key\":\"ilqhr7\"}]],\"className\":\"lucide-map-pin mt-0.5 shrink-0 text-[#FF6827]\",\"size\":16}],[\"$\",\"span\",null,{\"children\":[\"2nd Floor, Kapil Vihar, (Opp. Metro Pillar No.354)\",[\"$\",\"br\",null,{}],\"Pitampura, New Delhi – 110034\"]}]]}],[\"$\",\"div\",null,{\"className\":\"addr-icon\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384\",\"key\":\"9njp5v\"}]],\"className\":\"lucide-phone mt-0.5 shrink-0 text-[#FF6827]\",\"size\":16}],[\"$\",\"span\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"tel:+919899508745\",\"children\":\"+91 9899508745\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"addr-icon\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7\",\"key\":\"132q7q\"}],[\"rect\",{\"x\":\"2\",\"y\":\"4\",\"width\":\"20\",\"height\":\"16\",\"rx\":\"2\",\"key\":\"izxlao\"}]],\"className\":\"lucide-mail mt-0.5 shrink-0 text-[#FF6827]\",\"size\":16}],[\"$\",\"span\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"mailto:info@aivasu.com\",\"children\":\"info@aivasu.com\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"addr-icon\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}],[\"path\",{\"d\":\"M12 6v6l4 2\",\"key\":\"mmk7yg\"}]],\"className\":\"lucide-clock mt-0.5 shrink-0 text-[#FF6827]\",\"size\":16}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"size-1.5 rounded-full bg-[#FF6827]\"}],\" Mon – Sat: 9:00 AM – 7:00 PM\"]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"footer-map\",\"children\":[[\"$\",\"h3\",null,{\"children\":\"Find Us Here\"}],[\"$\",\"div\",null,{\"className\":\"map-wrapper\",\"style\":{\"height\":200},\"children\":[\"$\",\"$L14\",null,{\"src\":\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3499.5!2d77.1366043!3d28.699913!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d03f5a6f7e8b1%3A0x790b8e5e5f3e4b53!2sCoding%20Now%20Tech%20Institute!5e0!3m2!1sen!2sin!4v1700000000000!5m2!1sen!2sin\",\"title\":\"Aivasu Tech Institute Office Location Map\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"footer-social\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.linkedin.com/company/codingnowai-in\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"LinkedIn\",\"children\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 448 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}]}],[\"$\",\"a\",null,{\"href\":\"https://www.instagram.com/codingnowai\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Instagram\",\"children\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"role\":\"img\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$15\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}]}],\"$L16\",\"$L17\",\"$L18\"]}]]}],\"$L19\",\"$L1a\",\"$L1b\",\"$L1c\"]}]}],\"$L1d\",\"$L1e\"]}],\"children\":\"$L1f\"}],\"$L20\"]}]\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$2\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/06e9u1z1ch22m.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"div\",null,{\"className\":\"cn-notes\",\"children\":[\"$\",\"$L21\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L22\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]\n7:[\"$\",\"$2\",\"c\",{\"children\":[null,[\"$\",\"$L21\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L22\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$2\",\"c\",{\"children\":[null,[\"$\",\"$L21\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L22\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$2\",\"c\",{\"children\":[\"$L23\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/00mc57ok_31ai.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L24\",null,{\"children\":[\"$\",\"$25\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@26\"}]}]]}]\n27:[]\na:\"$W27\"\nb:[\"$\",\"$2\",\"h\",{\"children\":[null,[\"$\",\"$L28\",null,{\"children\":\"$L29\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L2a\",null,{\"children\":[\"$\",\"$25\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L2b\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nd:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0qmc2eu56a_hq.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\ne:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0_qmdxypjebtc.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script><script>self.__next_f.push([1,"2d:I[33752,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"default\"]\n16:[\"$\",\"a\",null,{\"href\":\"https://www.facebook.com/codingnow\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Facebook\",\"children\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"role\":\"img\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}]}]\n2c:T450,M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z17:[\"$\",\"a\",null,{\"href\":\"https://wa.me/919667708830\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"WhatsApp\",\"children\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"role\":\"img\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$2c\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}]}]\n18:[\"$\",\"a\",null,{\"href\":\"https://www.youtube.com/@codingnowai\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"YouTube\",\"children\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"role\":\"img\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}]}]\n19:[\"$\",\"div\",null,{\"className\":\"footer-links\",\"children\":[[\"$\",\"h4\",null,{\"children\":\"AI \u0026 Data\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/generative-ai\",\"children\":\"Generative AI\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/prompt-engineering\",\"children\":\"Prompt Engineering\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/ai-engineering-diploma\",\"children\":\"AI Engineering Diploma\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/data-science\",\"children\":\"Data Science\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/data-analytics\",\"children\":\"Data Analytics\"}]]}]\n1a:[\"$\",\"div\",null,{\"className\":\"footer-links\",\"children\":[[\"$\",\"h4\",null,{\"children\":\"Full Stack\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/ai-integrated-full-stac"])</script><script>self.__next_f.push([1,"k\",\"children\":\"AI-Integrated Full Stack\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/python-full-stack\",\"children\":\"Python Full Stack\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/mern-stack\",\"children\":\"MERN Stack\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/mean-stack\",\"children\":\"MEAN Stack\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/react-full-stack\",\"children\":\"React Full Stack\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/dot-net-full-stack\",\"children\":\".NET Full Stack\"}]]}]\n1b:[\"$\",\"div\",null,{\"className\":\"footer-links\",\"children\":[[\"$\",\"h4\",null,{\"children\":\"Cloud \u0026 Cyber\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/aws-developer-associate\",\"children\":\"AWS Developer Associate\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/aws-solutions-architect\",\"children\":\"AWS Solutions Architect\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/azure-administrator\",\"children\":\"Azure Administrator\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/google-cloud\",\"children\":\"Google Cloud\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/ethical-hacker\",\"children\":\"Ethical Hacker (C|EH)\"}],[\"$\",\"$L11\",null,{\"href\":\"/courses/cissp\",\"children\":\"CISSP\"}]]}]\n1c:[\"$\",\"div\",null,{\"className\":\"footer-newsletter\",\"children\":[[\"$\",\"h4\",null,{\"children\":\"Stay Updated\"}],[\"$\",\"p\",null,{\"children\":\"Get latest course updates, offers \u0026 career tips directly in your inbox.\"}],[\"$\",\"div\",null,{\"className\":\"newsletter-box\",\"children\":[[\"$\",\"input\",null,{\"type\":\"email\",\"placeholder\":\"Your email\",\"aria-label\":\"Email for newsletter\"}],[\"$\",\"button\",null,{\"aria-label\":\"Subscribe\",\"className\":\"hover:!bg-[#FF6827] hover:!text-white transition-colors\",\"children\":\"→\"}]]}],[\"$\",\"p\",null,{\"className\":\"newsletter-note\",\"children\":\"No spam. Unsubscribe anytime.\"}],[\"$\",\"div\",null,{\"className\":\"footer-links\",\"style\":{\"marginTop\":\"24px\"},\"children\":[[\"$\",\"h4\",null,{\"children\":\"Company\"}],[\"$\",\"$L11\",null,{\"href\":\"/about\",\"children\":\"About Us\"}],[\"$\",\"$L11\",null,{\"href\":\"/our-mission\",\"children\":\"Our Mission\"}],[\"$\",\"$L11\",null,{\"href\":\"/enroll-now\",\"children\":\"Contact Us\"}]]}]]}]\n1d:[\"$\",\"hr\",null,{\"className\":\"footer-divider\"}]\n1e:[\"$\",\"div\",null,{\"className\":\"site-container\",\"children\":[\"$\",\"div\",null,{\"className\":\"footer-bottom-pro\",\"children\":[[\"$\",\"p\",null,{\"children\":\"© 2026 Aivasu Tech Institute. All rights reserved.\"}],[\"$\",\"div\",null,{\"className\":\"footer-bottom-links\",\"style\":{\"gap\":12,\"flexWrap\":\"wrap\",\"justifyContent\":\"center\"},\"children\":[[\"$\",\"a\",null,{\"href\":\"/privacy-policy/\",\"children\":\"Privacy Policy\"}],[\"$\",\"a\",null,{\"href\":\"/terms/\",\"children\":\"Terms of Use\"}],[\"$\",\"a\",null,{\"href\":\"/refund-policy/\",\"children\":\"Refund Policy\"}],[\"$\",\"$L11\",null,{\"href\":\"/enroll-now\",\"children\":\"Contact\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"1f:[\"$\",\"$L21\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L22\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen flex items-center justify-center bg-gradient-to-br from-[#202A26] via-[#202A26] to-[#202A26] px-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-center max-w-md\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-[120px] md:text-[160px] font-semibold tracking-tight text-white/10 leading-none select-none\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"text-2xl md:text-3xl font-semibold tracking-tight text-[#FAF9F6] -mt-8 mb-3\",\"children\":[\"Page \",[\"$\",\"span\",null,{\"className\":\"font-serif italic font-normal\",\"children\":\"not found.\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-[#FAF9F6]/60 text-sm md:text-base mb-8\",\"children\":\"The page you're looking for doesn't exist or has been moved. Let's get you back on track.\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col sm:flex-row items-center justify-center gap-4\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"flex items-center gap-2 bg-[#FAF9F6] text-[#202A26] font-semibold px-6 py-3 rounded-md hover:bg-[#FAF9F6]/90 transition-colors\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\",\"key\":\"5wwlr5\"}],[\"path\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\",\"key\":\"r6nss1\"}]],\"className\":\"lucide-house\",\"size\":18}],\" Go Home\"]}],[\"$\",\"$L11\",null,{\"href\":\"/courses\",\"className\":\"flex items-center gap-2 border border-[#FAF9F6]/30 text-[#FAF9F6] font-semibold px-6 py-3 rounded-md hover:bg-[#FAF9F6]/10 transition-colors\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m12 19-7-7 7-7\",\"key\":\"1l729n\"}],[\"path\",{\"d\":\"M19 12H5\",\"key\":\"x3x0zl\"}]],\"className\":\"lucide-arrow-left\",\"size\":18}],\" Browse Courses\"]}],[\"$\",\"$L11\",null,{\"href\":\"/blog\",\"className\":\"flex items-center gap-2 border border-[#FAF9F6]/30 text-[#FAF9F6] font-semibold px-6 py-3 rounded-md hover:bg-[#FAF9F6]/10 transition-colors\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$1f:props:notFound:0:props:children:props:children:3:props:children:1:props:children:0:props:iconNode\",\"className\":\"lucide-arrow-left\",\"size\":18}],\" Read the Blog\"]}]]}]]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]\n"])</script><script>self.__next_f.push([1,"20:[\"$\",\"$L2d\",null,{}]\n"])</script><script>self.__next_f.push([1,"2e:T5a0,"])</script><script>self.__next_f.push([1,"[{\"@context\":\"https://schema.org\",\"@type\":\"TechArticle\",\"@id\":\"https://www.aivasu.com/notes/html/html-form-elements/#article\",\"headline\":\"HTML Form Elements\",\"description\":\"Inputs, selects, textareas and buttons each collect a different kind of data. Knowing the full range of form elements lets you design any data-entry flow.\",\"author\":{\"@type\":\"Organization\",\"name\":\"Aivasu Tech Institute\",\"url\":\"https://www.aivasu.com\"},\"publisher\":{\"@type\":\"Organization\",\"name\":\"Aivasu Tech Institute\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://www.aivasu.com/aivasulogo1.svg\"}},\"url\":\"https://www.aivasu.com/notes/html/html-form-elements/\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://www.aivasu.com/notes/html/html-form-elements/\"},\"inLanguage\":\"en-IN\",\"wordCount\":721,\"isPartOf\":{\"@type\":\"CreativeWorkSeries\",\"name\":\"HTML Notes\",\"url\":\"https://www.aivasu.com/notes/html/\"},\"speakable\":{\"@type\":\"SpeakableSpecification\",\"cssSelector\":[\"h1\",\"h2\",\".post-body \u003e p:first-of-type\"]},\"profiling\":{\"@type\":\"Text\",\"name\":\"code-example\"}},{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.aivasu.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Notes\",\"item\":\"https://www.aivasu.com/notes/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML Notes\",\"item\":\"https://www.aivasu.com/notes/html/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"HTML Form Elements\"}]}]"])</script><script>self.__next_f.push([1,"23:[\"$\",\"main\",null,{\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2e\"}}],[\"$\",\"section\",null,{\"className\":\"post-hero\",\"children\":[\"$\",\"div\",null,{\"className\":\"container\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"crumb\",\"aria-label\":\"Breadcrumb\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/\",\"children\":\"Home\"}],[\"$\",\"span\",null,{\"className\":\"sep\",\"children\":\"/\"}],[\"$\",\"$L11\",null,{\"href\":\"/notes\",\"children\":\"Notes\"}],[\"$\",\"span\",null,{\"className\":\"sep\",\"children\":\"/\"}],[\"$\",\"$L11\",null,{\"href\":\"/notes/html\",\"children\":\"HTML\"}],[\"$\",\"span\",null,{\"className\":\"sep\",\"children\":\"/\"}],[[\"$\",\"$L11\",null,{\"href\":\"/notes/html#cat-html-forms\",\"children\":\"HTML Forms\"}],[\"$\",\"span\",null,{\"className\":\"sep\",\"children\":\"/\"}]],[\"$\",\"span\",null,{\"className\":\"cur\",\"children\":\"HTML Form Elements\"}]]}],[\"$\",\"$L11\",null,{\"href\":\"/notes/html\",\"className\":\"post-back\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$1f:props:notFound:0:props:children:props:children:3:props:children:1:props:children:0:props:iconNode\",\"className\":\"lucide-arrow-left\",\"size\":14}],\" Back to \",\"HTML\",\" Notes\"]}],[\"$\",\"br\",null,{}],[\"$\",\"$L12\",null,{\"src\":\"/svgs/HTML.svg\",\"alt\":\"\",\"width\":40,\"height\":40,\"unoptimized\":true,\"className\":\"hero-icon\"}],[\"$\",\"span\",null,{\"className\":\"post-cat-badge\",\"children\":[\"Topic #\",62]}],[\"$\",\"h1\",null,{\"className\":\"post-title\",\"children\":\"HTML Form Elements\"}],[\"$\",\"p\",null,{\"className\":\"topic-intro\",\"children\":\"Inputs, selects, textareas and buttons each collect a different kind of data. Knowing the full range of form elements lets you design any data-entry flow.\"}],[\"$\",\"div\",null,{\"className\":\"post-meta\",\"children\":[[\"$\",\"span\",null,{\"children\":[\"HTML\",\" Notes · Aivasu Tech Institute\"]}],[\"$\",\"span\",null,{\"children\":[4,\" min read\"]}],false,[\"$\",\"a\",null,{\"href\":\"https://www.w3schools.com/html/html_form_elements.asp\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"style\":{\"color\":\"inherit\",\"textDecoration\":\"underline\"},\"children\":\"Source\"}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"note-layout\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"nav\",null,{\"className\":\"lesson-outline\",\"aria-label\":\"In this lesson\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"In this lesson\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"a\",\"the-html-elements\",{\"href\":\"#the-html-elements\",\"children\":\"The HTML Elements\"}],[\"$\",\"a\",\"the-element\",{\"href\":\"#the-element\",\"children\":\"The Element\"}],[\"$\",\"a\",\"the-element-2\",{\"href\":\"#the-element-2\",\"children\":\"The Element\"}],[\"$\",\"a\",\"the-element-3\",{\"href\":\"#the-element-3\",\"children\":\"The Element\"}],[\"$\",\"a\",\"the-element-4\",{\"href\":\"#the-element-4\",\"children\":\"The Element\"}],[\"$\",\"a\",\"the-element-5\",{\"href\":\"#the-element-5\",\"children\":\"The Element\"}],\"$L2f\",\"$L30\",\"$L31\",\"$L32\"]}]]}],\"$L33\",\"$L34\",\"$L35\"]}],\"$L36\"]}],\"$L37\"]}]\n"])</script><script>self.__next_f.push([1,"3f:I[46042,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\",\"/_next/static/chunks/00mc57ok_31ai.js\"],\"default\"]\n2f:[\"$\",\"a\",\"the-and-elements\",{\"href\":\"#the-and-elements\",\"children\":\"The and Elements\"}]\n30:[\"$\",\"a\",\"the-element-7\",{\"href\":\"#the-element-7\",\"children\":\"The Element\"}]\n31:[\"$\",\"a\",\"the-element-8\",{\"href\":\"#the-element-8\",\"children\":\"The Element\"}]\n32:[\"$\",\"a\",\"html-form-elements\",{\"href\":\"#html-form-elements\",\"children\":\"HTML Form Elements\"}]\n38:T21bb,"])</script><script>self.__next_f.push([1,"\u003chr\u003e\n\u003cp\u003eThis chapter describes all the different HTML form elements.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"the-html-elements\"\u003eThe HTML \u003cform\u003e Elements\u003c/h2\u003e\n\u003cp\u003eThe HTML \u003ccode\u003e\u0026#x3C;form\u003e\u003c/code\u003e element can contain one or more of the following form elements:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;input\u003e\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;label\u003e\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;select\u003e\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;textarea\u003e\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;button\u003e\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;fieldset\u003e\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;legend\u003e\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;datalist\u003e\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;output\u003e\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;option\u003e\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026#x3C;optgroup\u003e\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003ch2 id=\"the-element\"\u003eThe \u003cinput\u003e Element\u003c/h2\u003e\n\u003cp\u003eOne of the most used form elements is the \u003ccode\u003e\u0026#x3C;input\u003e\u003c/code\u003e element.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;input\u003e\u003c/code\u003e element can be displayed in several ways, depending on the \u003ccode\u003etype\u003c/code\u003e attribute.\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;label for=\"fname\"\u003eFirst name:\u0026#x3C;/label\u003e\n\u0026#x3C;input type=\"text\" id=\"fname\" name=\"fname\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eAll the different values of the \u003ccode\u003etype\u003c/code\u003e attribute are covered in the next chapter: HTML Input Types.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"the-element-2\"\u003eThe \u003clabel\u003e Element\u003c/h2\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;label\u003e\u003c/code\u003e element defines a label for several form elements.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;label\u003e\u003c/code\u003e element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;label\u003e\u003c/code\u003e element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the \u003ccode\u003e\u0026#x3C;label\u003e\u003c/code\u003e element, it toggles the radio button/checkbox.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003efor\u003c/code\u003e attribute of the \u003ccode\u003e\u0026#x3C;label\u003e\u003c/code\u003e tag should be equal to the \u003ccode\u003eid\u003c/code\u003e attribute of the \u003ccode\u003e\u0026#x3C;input\u003e\u003c/code\u003e element to bind them together.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"the-element-3\"\u003eThe \u003cselect\u003e Element\u003c/h2\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;select\u003e\u003c/code\u003e element defines a drop-down list:\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;label for=\"cars\"\u003eChoose a car:\u0026#x3C;/label\u003e\n\u0026#x3C;select id=\"cars\" name=\"cars\"\u003e\n \u0026#x3C;option value=\"volvo\"\u003eVolvo\u0026#x3C;/option\u003e\n\n \u0026#x3C;option value=\"saab\"\u003eSaab\u0026#x3C;/option\u003e\n \u0026#x3C;option value=\"fiat\"\u003eFiat\u0026#x3C;/option\u003e\n\n \u0026#x3C;option value=\"audi\"\u003eAudi\u0026#x3C;/option\u003e\n\u0026#x3C;/select\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;option\u003e\u003c/code\u003e element defines an option that can be selected.\u003c/p\u003e\n\u003cp\u003eBy default, the first item in the drop-down list is selected.\u003c/p\u003e\n\u003cp\u003eTo define a pre-selected option, add the \u003ccode\u003eselected\u003c/code\u003e attribute to the option:\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;option value=\"fiat\" selected\u003eFiat\u0026#x3C;/option\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eVisible Values:\u003c/h3\u003e\n\u003cp\u003eUse the \u003ccode\u003esize\u003c/code\u003e attribute to specify the number of visible values:\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;label for=\"cars\"\u003eChoose a car:\u0026#x3C;/label\u003e\n\u0026#x3C;select id=\"cars\" name=\"cars\" size=\"3\"\u003e\n \u0026#x3C;option value=\"volvo\"\u003eVolvo\u0026#x3C;/option\u003e\n\n \u0026#x3C;option value=\"saab\"\u003eSaab\u0026#x3C;/option\u003e\n \u0026#x3C;option value=\"fiat\"\u003eFiat\u0026#x3C;/option\u003e\n\n \u0026#x3C;option value=\"audi\"\u003eAudi\u0026#x3C;/option\u003e\n\u0026#x3C;/select\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eAllow Multiple Selections:\u003c/h3\u003e\n\u003cp\u003eUse the \u003ccode\u003emultiple\u003c/code\u003e attribute to allow the user to select more than one value:\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;label for=\"cars\"\u003eChoose a car:\u0026#x3C;/label\u003e\n\u0026#x3C;select id=\"cars\" name=\"cars\" size=\"4\" multiple\u003e\n \u0026#x3C;option value=\"volvo\"\u003eVolvo\u0026#x3C;/option\u003e\n\n \u0026#x3C;option value=\"saab\"\u003eSaab\u0026#x3C;/option\u003e\n \u0026#x3C;option value=\"fiat\"\u003eFiat\u0026#x3C;/option\u003e\n\n \u0026#x3C;option value=\"audi\"\u003eAudi\u0026#x3C;/option\u003e\n\u0026#x3C;/select\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"the-element-4\"\u003eThe \u003ctextarea\u003e Element\u003c/h2\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;textarea\u003e\u003c/code\u003e element defines a multi-line input field (a text area):\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;textarea name=\"message\" rows=\"10\" cols=\"30\"\u003e\nThe cat was playing in the garden.\n\u0026#x3C;/textarea\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe \u003ccode\u003erows\u003c/code\u003e attribute specifies the visible number of lines in a text area.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003ecols\u003c/code\u003e attribute specifies the visible width of a text area.\u003c/p\u003e\n\u003cp\u003eThis is how the HTML code above will be displayed in a browser:\u003c/p\u003e\n\u003cp\u003eYou can also define the size of the text area by using CSS:\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;textarea name=\"message\"\n style=\"width:200px; height:600px;\"\u003e\nThe cat was playing in the garden.\n\u0026#x3C;/textarea\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"the-element-5\"\u003eThe \u003cbutton\u003e Element\u003c/h2\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;button\u003e\u003c/code\u003e element defines a clickable button:\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;button type=\"button\"\nonclick=\"alert('Hello World!')\"\u003eClick Me!\u0026#x3C;/button\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis is how the HTML code above will be displayed in a browser:\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003cstrong\u003eNote:\u003c/strong\u003e Always specify the \u003ccode\u003etype\u003c/code\u003e attribute for the button element. Different browsers may use different default types for the button element.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003chr\u003e\n\u003ch2 id=\"the-and-elements\"\u003eThe \u003cfieldset\u003e and \u003clegend\u003e Elements\u003c/h2\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;fieldset\u003e\u003c/code\u003e element is used to group related data in a form.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;legend\u003e\u003c/code\u003e element defines a caption for the \u003ccode\u003e \u0026#x3C;fieldset\u003e\u003c/code\u003e element.\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;form action=\"/action_page.php\"\u003e\n \u0026#x3C;fieldset\u003e\n\n \u0026#x3C;legend\u003ePersonalia:\u0026#x3C;/legend\u003e\n \u0026#x3C;label for=\"fname\"\u003eFirst\n name:\u0026#x3C;/label\u003e\u0026#x3C;br\u003e\n \u0026#x3C;input type=\"text\" id=\"fname\" name=\"fname\"\n value=\"John\"\u003e\u0026#x3C;br\u003e\n \u0026#x3C;label for=\"lname\"\u003eLast name:\u0026#x3C;/label\u003e\u0026#x3C;br\u003e\n\n \u0026#x3C;input type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"\u003e\u0026#x3C;br\u003e\u0026#x3C;br\u003e\n\n \u0026#x3C;input type=\"submit\" value=\"Submit\"\u003e\n \u0026#x3C;/fieldset\u003e\n\u0026#x3C;/form\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis is how the HTML code above will be displayed in a browser:\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"the-element-7\"\u003eThe \u003cdatalist\u003e Element\u003c/h2\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;datalist\u003e\u003c/code\u003e element specifies a list of pre-defined options for an \u003ccode\u003e\u0026#x3C;input\u003e\u003c/code\u003e element.\u003c/p\u003e\n\u003cp\u003eUsers will see a drop-down list of the pre-defined options as they input data.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003elist\u003c/code\u003e attribute of the \u003ccode\u003e\u0026#x3C;input\u003e\u003c/code\u003e element, must refer to the \u003ccode\u003eid\u003c/code\u003e attribute of the \u003ccode\u003e\u0026#x3C;datalist\u003e\u003c/code\u003e element.\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;form action=\"/action_page.php\"\u003e\n \u0026#x3C;input list=\"browsers\"\u003e\n\n \u0026#x3C;datalist id=\"browsers\"\u003e\n\n \u0026#x3C;option value=\"Edge\"\u003e\n\n \u0026#x3C;option value=\"Firefox\"\u003e\n\n \u0026#x3C;option value=\"Chrome\"\u003e\n\n \u0026#x3C;option value=\"Opera\"\u003e\n\n \u0026#x3C;option value=\"Safari\"\u003e\n\n \u0026#x3C;/datalist\u003e\n\u0026#x3C;/form\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"the-element-8\"\u003eThe \u003coutput\u003e Element\u003c/h2\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;output\u003e\u003c/code\u003e element represents the result of a calculation (like one performed by a script).\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;form action=\"/action_page.php\"\n oninput=\"x.value=parseInt(a.value)+parseInt(b.value)\"\u003e\n 0\n\n \u0026#x3C;input type=\"range\" id=\"a\" name=\"a\" value=\"50\"\u003e\n 100 +\n\n \u0026#x3C;input type=\"number\" id=\"b\" name=\"b\" value=\"50\"\u003e\n =\n\n \u0026#x3C;output name=\"x\" for=\"a b\"\u003e\u0026#x3C;/output\u003e\n \u0026#x3C;br\u003e\u0026#x3C;br\u003e\n \u0026#x3C;input type=\"submit\"\u003e\n\n\u0026#x3C;/form\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"html-form-elements\"\u003eHTML Form Elements\u003c/h2\u003e\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eTag\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cform\u003e\u003c/td\u003e\n\u003ctd\u003eDefines an HTML form for user input\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cinput\u003e\u003c/td\u003e\n\u003ctd\u003eDefines an input control\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ctextarea\u003e\u003c/td\u003e\n\u003ctd\u003eDefines a multiline input control (text area)\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003clabel\u003e\u003c/td\u003e\n\u003ctd\u003eDefines a label for an \u003cinput\u003e element\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cfieldset\u003e\u003c/td\u003e\n\u003ctd\u003eGroups related elements in a form\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003clegend\u003e\u003c/td\u003e\n\u003ctd\u003eDefines a caption for a \u003cfieldset\u003e element\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cselect\u003e\u003c/td\u003e\n\u003ctd\u003eDefines a drop-down list\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003coptgroup\u003e\u003c/td\u003e\n\u003ctd\u003eDefines a group of related options in a drop-down list\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003coption\u003e\u003c/td\u003e\n\u003ctd\u003eDefines an option in a drop-down list\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cbutton\u003e\u003c/td\u003e\n\u003ctd\u003eDefines a clickable button\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cdatalist\u003e\u003c/td\u003e\n\u003ctd\u003eSpecifies a list of pre-defined options for input controls\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003coutput\u003e\u003c/td\u003e\n\u003ctd\u003eDefines the result of a calculation\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003cstrong\u003eNote:\u003c/strong\u003e For a complete list of all available HTML tags, visit our HTML Tag Reference.\u003c/p\u003e\n\u003c/blockquote\u003e\n"])</script><script>self.__next_f.push([1,"33:[\"$\",\"div\",null,{\"className\":\"post-body\",\"children\":[[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$38\"}}],\"$L39\"]}]\n34:[\"$\",\"div\",null,{\"className\":\"prevnext\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/notes/html/html-form-attributes\",\"className\":\"pn-btn pn-prev\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$1f:props:notFound:0:props:children:props:children:3:props:children:1:props:children:0:props:iconNode\",\"className\":\"lucide-arrow-left\",\"size\":13}],\" Previous\"]}],[\"$\",\"strong\",null,{\"children\":\"HTML Form Attributes\"}]]}],[\"$\",\"$L11\",null,{\"href\":\"/notes/html/html-input-types\",\"className\":\"pn-btn pn-next\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1\",\"children\":[\"Next \",[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M5 12h14\",\"key\":\"1ays0h\"}],[\"path\",{\"d\":\"m12 5 7 7-7 7\",\"key\":\"xquz4c\"}]],\"className\":\"lucide-arrow-right\",\"size\":13}]]}],[\"$\",\"strong\",null,{\"children\":\"HTML Input Types\"}]]}]]}]\n35:[\"$\",\"div\",null,{\"className\":\"note-cta\",\"children\":[[\"$\",\"h3\",null,{\"children\":\"Want to go beyond the notes?\"}],[\"$\",\"p\",null,{\"children\":[\"Join Aivasu Tech Institute's \",\"HTML\",\" course — live mentorship, real projects, and 100% placement support.\"]}],[\"$\",\"$L11\",null,{\"href\":\"/enroll-now\",\"children\":\"Enroll Now — Free Demo Available\"}]]}]\n"])</script><script>self.__next_f.push([1,"36:[\"$\",\"aside\",null,{\"className\":\"topics-side\",\"children\":[[\"$\",\"h4\",null,{\"children\":[\"HTML\",\" Notes — All Topics\"]}],[\"$\",\"div\",null,{\"className\":\"ts-group\",\"children\":[[\"$\",\"div\",null,{\"className\":\"ts-group-label\",\"children\":\"HTML Forms\"}],[[\"$\",\"$L11\",\"html-forms\",{\"href\":\"/notes/html/html-forms\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":60}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Forms\"}]]}],[\"$\",\"$L11\",\"html-form-attributes\",{\"href\":\"/notes/html/html-form-attributes\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":61}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Form Attributes\"}]]}],[\"$\",\"$L11\",\"html-form-elements\",{\"href\":\"/notes/html/html-form-elements\",\"className\":\"ts-item active\",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":62}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Form Elements\"}]]}],[\"$\",\"$L11\",\"html-input-types\",{\"href\":\"/notes/html/html-input-types\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":63}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Input Types\"}]]}],[\"$\",\"$L11\",\"html-input-attributes\",{\"href\":\"/notes/html/html-input-attributes\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":64}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Input Attributes\"}]]}],[\"$\",\"$L11\",\"input-form-attributes\",{\"href\":\"/notes/html/input-form-attributes\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":65}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Input Form Attributes\"}]]}]]]}],[\"$\",\"div\",null,{\"className\":\"ts-other-cats\",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-other-label\",\"children\":\"Other sections\"}],[\"$\",\"nav\",null,{\"children\":[[\"$\",\"$L11\",\"html-tutorial\",{\"href\":\"/notes/html#cat-html-tutorial\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z\",\"key\":\"zw3jo\"}],[\"path\",{\"d\":\"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12\",\"key\":\"1wduqc\"}],[\"path\",{\"d\":\"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17\",\"key\":\"kqbvx6\"}]],\"className\":\"lucide-layers\",\"size\":12,\"aria-hidden\":\"true\"}],\"HTML Tutorial\",\" (\",59,\")\"]}],[\"$\",\"$L11\",\"html-graphics\",{\"href\":\"/notes/html#cat-html-graphics\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$36:props:children:2:props:children:1:props:children:0:props:children:0:props:iconNode\",\"className\":\"lucide-layers\",\"size\":12,\"aria-hidden\":\"true\"}],\"HTML Graphics\",\" (\",2,\")\"]}],[\"$\",\"$L11\",\"html-media\",{\"href\":\"/notes/html#cat-html-media\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$36:props:children:2:props:children:1:props:children:0:props:children:0:props:iconNode\",\"className\":\"lucide-layers\",\"size\":12,\"aria-hidden\":\"true\"}],\"HTML Media\",\" (\",5,\")\"]}],[\"$\",\"$L11\",\"html-apis\",{\"href\":\"/notes/html#cat-html-apis\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$36:props:children:2:props:children:1:props:children:0:props:children:0:props:iconNode\",\"className\":\"lucide-layers\",\"size\":12,\"aria-hidden\":\"true\"}],\"HTML APIs\",\" (\",6,\")\"]}],[\"$\",\"$L11\",\"more-basics\",{\"href\":\"/notes/html#cat-more-basics\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2\",\"key\":\"1ah6g2\"}],[\"rect\",{\"x\":\"14\",\"y\":\"2\",\"width\":\"8\",\"height\":\"8\",\"rx\":\"1\",\"key\":\"88lufb\"}]],\"className\":\"lucide-blocks\",\"size\":12,\"aria-hidden\":\"true\"}],\"HTML Basics\",\" (\",12,\")\"]}],[\"$\",\"$L11\",\"more-text\",{\"href\":\"/notes/html#cat-more-text\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M13 21h8\",\"key\":\"1jsn5i\"}],[\"path\",{\"d\":\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\",\"key\":\"1a8usu\"}]],\"className\":\"lucide-pen-line\",\"size\":12,\"aria-hidden\":\"true\"}],\"Text \u0026 Content\",\" (\",19,\")\"]}],[\"$\",\"$L11\",\"more-links\",{\"href\":\"/notes/html#cat-more-links\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M9 17H7A5 5 0 0 1 7 7h2\",\"key\":\"8i5ue5\"}],[\"path\",{\"d\":\"M15 7h2a5 5 0 1 1 0 10h-2\",\"key\":\"1b9ql8\"}],[\"line\",{\"x1\":\"8\",\"x2\":\"16\",\"y1\":\"12\",\"y2\":\"12\",\"key\":\"1jonct\"}]],\"className\":\"lucide-link2 lucide-link-2\",\"size\":12,\"aria-hidden\":\"true\"}],\"Links\",\" (\",12,\")\"]}],[\"$\",\"$L11\",\"more-images\",{\"href\":\"/notes/html#cat-more-images\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"rect\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"3\",\"rx\":\"2\",\"ry\":\"2\",\"key\":\"1m3agn\"}],[\"circle\",{\"cx\":\"9\",\"cy\":\"9\",\"r\":\"2\",\"key\":\"af1f0g\"}],[\"path\",{\"d\":\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\",\"key\":\"1xmnt7\"}]],\"className\":\"lucide-image\",\"size\":12,\"aria-hidden\":\"true\"}],\"Images\",\" (\",10,\")\"]}],\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\"]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"3e:T4ac,{\"@context\":\"https://schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What does this HTML Form Elements note cover?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"This free note from Aivasu Tech Institute explains HTML Form Elements in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews.\"}},{\"@type\":\"Question\",\"name\":\"Is this HTML Form Elements tutorial free?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Every HTML topic on Aivasu Tech Institute, including HTML Form Elements, is 100% free with no signup required.\"}},{\"@type\":\"Question\",\"name\":\"How long does it take to learn HTML Form Elements?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"With focused practice, most students grasp HTML Form Elements in 1–3 days from these notes; pairing it with Aivasu Tech Institute's mentor-led course takes you to job-ready depth faster.\"}},{\"@type\":\"Question\",\"name\":\"Where can I practise HTML Form Elements after reading?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Use the code examples in this note, then ask doubts for free on the Aivasu Tech Institute Community (/community) — expert instructors answer within 24 hours.\"}}]}"])</script><script>self.__next_f.push([1,"37:[\"$\",\"section\",null,{\"className\":\"cn-faq-section\",\"aria-label\":\"HTML Form Elements – FAQs\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$3e\"}}],[\"$\",\"div\",null,{\"className\":\"cn-faq-inner\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-center font-mono text-[10.5px] sm:text-xs uppercase tracking-[0.25em] sm:tracking-[0.35em] text-[#202A26]/50\",\"children\":\"✳ Common questions\"}],[\"$\",\"h2\",null,{\"className\":\"cn-faq-title\",\"children\":[\"HTML Form Elements – \",[\"$\",\"span\",null,{\"className\":\"font-serif italic font-normal\",\"children\":\"FAQs\"}]]}],[\"$\",\"p\",null,{\"className\":\"cn-faq-sub\",\"children\":\"Quick answers about learning HTML Form Elements in HTML.\"}],[\"$\",\"$L3f\",null,{\"faqs\":[{\"q\":\"What does this HTML Form Elements note cover?\",\"a\":\"This free note from Aivasu Tech Institute explains HTML Form Elements in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews.\"},{\"q\":\"Is this HTML Form Elements tutorial free?\",\"a\":\"Yes. Every HTML topic on Aivasu Tech Institute, including HTML Form Elements, is 100% free with no signup required.\"},{\"q\":\"How long does it take to learn HTML Form Elements?\",\"a\":\"With focused practice, most students grasp HTML Form Elements in 1–3 days from these notes; pairing it with Aivasu Tech Institute's mentor-led course takes you to job-ready depth faster.\"},{\"q\":\"Where can I practise HTML Form Elements after reading?\",\"a\":\"Use the code examples in this note, then ask doubts for free on the Aivasu Tech Institute Community (/community) — expert instructors answer within 24 hours.\"}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"39:[\"$\",\"div\",null,{\"className\":\"share-bar\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"Share:\"}],[\"$\",\"a\",null,{\"href\":\"https://wa.me/?text=HTML%20Form%20Elements%20https%3A%2F%2Fwww.aivasu.com%2Fnotes%2Fhtml%2Fhtml-form-elements%2F\",\"target\":\"_blank\",\"rel\":\"noopener\",\"className\":\"share-btn s-wa\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 448 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}],\" WhatsApp\"]}],[\"$\",\"a\",null,{\"href\":\"https://www.linkedin.com/shareArticle?mini=true\u0026url=https%3A%2F%2Fwww.aivasu.com%2Fnotes%2Fhtml%2Fhtml-form-elements%2F\u0026title=HTML%20Form%20Elements\",\"target\":\"_blank\",\"rel\":\"noopener\",\"className\":\"share-btn s-li\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 448 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}],\" LinkedIn\"]}],[\"$\",\"a\",null,{\"href\":\"https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.aivasu.com%2Fnotes%2Fhtml%2Fhtml-form-elements%2F\u0026text=HTML%20Form%20Elements\",\"target\":\"_blank\",\"rel\":\"noopener\",\"className\":\"share-btn s-cp\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}],\" Copy / Share\"]}]]}]\n"])</script><script>self.__next_f.push([1,"3a:[\"$\",\"$L11\",\"more-lists\",{\"href\":\"/notes/html#cat-more-lists\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"rect\",{\"width\":\"8\",\"height\":\"4\",\"x\":\"8\",\"y\":\"2\",\"rx\":\"1\",\"ry\":\"1\",\"key\":\"tgr4d6\"}],[\"path\",{\"d\":\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\",\"key\":\"116196\"}],[\"path\",{\"d\":\"M12 11h4\",\"key\":\"1jrz19\"}],[\"path\",{\"d\":\"M12 16h4\",\"key\":\"n85exb\"}],[\"path\",{\"d\":\"M8 11h.01\",\"key\":\"1dfujw\"}],[\"path\",{\"d\":\"M8 16h.01\",\"key\":\"18s6g9\"}]],\"className\":\"lucide-clipboard-list\",\"size\":12,\"aria-hidden\":\"true\"}],\"Lists\",\" (\",6,\")\"]}]\n3b:[\"$\",\"$L11\",\"more-tables\",{\"href\":\"/notes/html#cat-more-tables\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M3 3v16a2 2 0 0 0 2 2h16\",\"key\":\"c24i48\"}],[\"path\",{\"d\":\"M18 17V9\",\"key\":\"2bz60n\"}],[\"path\",{\"d\":\"M13 17V5\",\"key\":\"1frdt8\"}],[\"path\",{\"d\":\"M8 17v-3\",\"key\":\"17ska0\"}]],\"className\":\"lucide-chart-column\",\"size\":12,\"aria-hidden\":\"true\"}],\"Tables\",\" (\",13,\")\"]}]\n3c:[\"$\",\"$L11\",\"more-forms\",{\"href\":\"/notes/html#cat-more-forms\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12 17V7\",\"key\":\"pyj7ub\"}],[\"path\",{\"d\":\"M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8\",\"key\":\"1elt7d\"}],[\"path\",{\"d\":\"M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z\",\"key\":\"ycz6yz\"}]],\"className\":\"lucide-receipt\",\"size\":12,\"aria-hidden\":\"true\"}],\"HTML Forms\",\" (\",31,\")\"]}]\n3d:[\"$\",\"$L11\",\"more-semantic\",{\"href\":\"/notes/html#cat-more-semantic\",\"className\":\"ts-other-link\",\"children\":[[\"$\",\"$L13\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\",\"key\":\"vktsd0\"}],[\"circle\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\",\"key\":\"kqv944\"}]],\"className\":\"lucide-tag\",\"size\":12,\"aria-hidden\":\"true\"}],\"Semantic HTML\",\" (\",16,\")\"]}]\n"])</script><script>self.__next_f.push([1,"29:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"40:I[27201,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0a9m_s~lmf4i7.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/14_gzd_rqlc_c.js\"],\"IconMark\"]\n26:null\n"])</script><script>self.__next_f.push([1,"2b:[[\"$\",\"title\",\"0\",{\"children\":\"HTML Form Elements – HTML Notes | Aivasu Tech Institute | Aivasu Tech Institute\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Inputs, selects, textareas and buttons each collect a different kind of data. Knowing the full range of form elements lets you design any data-entry flow.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://www.aivasu.com\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Aivasu Tech Institute\"}],[\"$\",\"link\",\"4\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"html html form elements,html form elements notes,html form elements tutorial,html form elements with examples,learn html\"}],[\"$\",\"meta\",\"6\",{\"name\":\"creator\",\"content\":\"Aivasu Tech Institute\"}],[\"$\",\"meta\",\"7\",{\"name\":\"publisher\",\"content\":\"Aivasu Tech Institute\"}],[\"$\",\"meta\",\"8\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"9\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"10\",{\"name\":\"geo.region\",\"content\":\"IN-DL\"}],[\"$\",\"meta\",\"11\",{\"name\":\"geo.placename\",\"content\":\"Pitampura, Delhi\"}],[\"$\",\"meta\",\"12\",{\"name\":\"geo.position\",\"content\":\"28.699913;77.1366043\"}],[\"$\",\"meta\",\"13\",{\"name\":\"ICBM\",\"content\":\"28.699913, 77.1366043\"}],[\"$\",\"link\",\"14\",{\"rel\":\"canonical\",\"href\":\"https://www.aivasu.com/notes/html/html-form-elements/\"}],[\"$\",\"meta\",\"15\",{\"name\":\"format-detection\",\"content\":\"telephone=no, address=no, email=no\"}],[\"$\",\"meta\",\"16\",{\"name\":\"google-site-verification\",\"content\":\"F393WPQyD7LpOobyT3QAGfAuhUxWEkniflvikb81CjE\"}],[\"$\",\"meta\",\"17\",{\"name\":\"msvalidate01\",\"content\":\"08F1AAA96A9BAF5FD3981FFE4F93AE3D\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:title\",\"content\":\"HTML Form Elements – HTML Notes | Aivasu Tech Institute\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:description\",\"content\":\"Inputs, selects, textareas and buttons each collect a different kind of data. Knowing the full range of form elements lets you design any data-entry flow.\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:url\",\"content\":\"https://www.aivasu.com/notes/html/html-form-elements/\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:title\",\"content\":\"Aivasu Tech Institute\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:description\",\"content\":\"Learn AI, Data Science \u0026 Full Stack with real-world mentorship and placement support.\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:image\",\"content\":\"https://www.aivasu.com/images/og-image.png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon_io/favicon.ico\"}],[\"$\",\"link\",\"27\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0x3dzn~oxb6tn.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"28\",{\"rel\":\"icon\",\"href\":\"/aivasulogo1.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"29\",{\"rel\":\"icon\",\"href\":\"/favicon_io/favicon.ico\",\"sizes\":\"any\"}],[\"$\",\"link\",\"30\",{\"rel\":\"icon\",\"href\":\"/favicon_io/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"31\",{\"rel\":\"icon\",\"href\":\"/favicon_io/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"32\",{\"rel\":\"icon\",\"href\":\"/favicon_io/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"link\",\"33\",{\"rel\":\"icon\",\"href\":\"/favicon_io/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"34\",{\"rel\":\"apple-touch-icon\",\"href\":\"/favicon_io/apple-touch-icon.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L40\",\"35\",{}]]\n"])</script></body></html>