HTML - attributes - n....

revision: March 16, 2024

Content

"name" attribute : specifies a name for an element

Value of the name attribute works as an identifier of the element.
The name attribute can be used on the following elements: <a>, <button>, <fieldset>, <from>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>.
The name attribute can be used to reference the element in a JavaScript.

Difference between "id attribute" and "name attribute":

Like the id attribute, the name attribute must begin with a letter and is case sensitive, but unlike the id attribute, it can be not unique.

The name attribute cannot be referenced in CSS. In Javascript, it is referenced with getElementsByName().

syntax

<element name=" "></element >

For a <form> element, the name attribute is used as a reference when the data is submitted.

For an <iframe> element, the name attribute can be used to target a form submission.

For a <map> element, the name attribute is associated with the <img>'s "usemap attribute" and creates a relationship between the image and the map.

For a ><meta> element, the name attribute specifies a name for the information/value of the "content attribute".

For a <param> element, the name attribute is used together with the value attribute to specify parameters for the plugin specified with the <object> tag.

some examples

                    <form style="margin-left:3vw;" action="/action_page.php" method="get">
                        <fieldset name="personalia">
                            <label for="fname">First name:</label>
                            <input type="text" id="fname" name="fname">
                        </fieldset>
                        <br>
                        <button type="button" onclick="form.personalia.style.backgroundColor='yellow'">
                        Change background color of fieldset</button>
                        <input type="submit">
                    </form>
                

                    <form style="margin-left:3vw;" action="/action_page.php">
                        <label for="fname">First name:</label>
                        <input type="text" id="fname" name="fname"><br><br>
                        <label for="lname">Last name:</label>
                        <input type="text" id="lname" name="lname"><br><br>
                        <input type="submit" value="Submit">
                    </form>
                

"novalidate" attribute : a boolean attribute for not validating data

When present, it specifies that the form-data (input) should not be validated when submitted. The "novalidate attribute" in HTML is used to signify that the form won't get validated on submit.
It is a boolean attribute and useful if you want the user to save the progress of form filing. If the form validation is disabled, the user can easily save the form and continue and submit the form later. While continuing, the user does not have to first validate all the entries.

syntax

<form novalidate></form >

some examples

                    <form style="margin-left:3vw;" action="/action_page.php" novalidate>                               
                        <label for="email">Enter your email:</label>
                        <input type="email" id="email" name="email"><br><br>
                        <input type="submit">
                    </form>
                

                    <form style="margin-left:3vw;" action="#"  method="get" target="_self" novalidate>
                        Name:
                        <input type="text">
                        <input type="submit" id="me" name="me" value="Submit @ me" formTarget="_blank">
                    </form>