The 5 Useful HTML Attributes...

In this blog, we are learning about 5 HTML Attributes that will be helpful for you. HTML elements have attributes, there are dozens of attributes are available in HTML but we are learning only a few of them.

What are attributes? Attributes are like extra features for elements or we say that it can adjust elements default behavior. It can be written in name and value pair e.g.name: "value"

we are covering the following attributes.

type
name
for
value
required.

Let's get started.

type

it is used to specify the type of element. In the case of the input element, we can use type to choose between various values like number, text, time, date, etc. It is commonly used with <input> <button> <style> <script> elements.

usage:

<form class="quiz-form">
       <label class = " label1" ><input type = "number"></label>
       <label class = " label1" ><input type = "radio"></label>
</form>

In the above example,type = "number" gives you an output with the number field and type="radio" gives you the radio button.

name

name attribute can be used to store the name of that HTML element. It can also be used as a reference element to javascript. When we use the input element with type radio, it is used to form a group of radio inputs

<form class="quiz-form">
    <label class="label question">DSA or CP is mandatory to get job</label>

    <label class="label">
        <input  type="radio" name="que2">true</label>

    <label class="label">
        <input  type="radio" name="que2">false</label>

in this case, we used a label with an input element. Input element has a type of radio button, which forms a group of two input elements so we can toggle with them and answer that question with true or false. If we change the second input element name with a different name it acts as a separate radio button.

for

for attribute is used to connect elements. We can use for attribute with <label> <output> elements.

<form class="quiz-form">
           <label for="radio1" class="label">
                    <input required type="radio" id="radio1" name="que1" >
            yes</label>
</form>

Here we used for attribute to connect label with input element. it works like this --> this is a label for input elements with id "radio1", the value of for attribute has to be same as the id of an input element.

value

It specifies the value for that element. value attribute is used as the default or initial value of that element. It can be used with <button> <input> etc. elements.

<form class="quiz-form">

    <label for="radio1" class="label"
              <input   type="radio"   id="radio1"   name="que1"   value="yes"> yes             
    </label>

</form>

In the above example initial value of input element is yes. We can access this value in javascript to modify or compare values.

required

As its name suggests it is required. it used with <input> <textarea> <select> elements. it indicates the user has to fill out the input element.

  <label for="radio1" class="label">

             <input required type="radio" id="radio1" name="que1" value="right">

   yes</label>

It is used to show user, a prompt that you did not fill the input element, and it's mandatory to fill that out. The required attribute is a boolean attribute.

That's it. hope you have enjoyed👍. this is my first blog, so please share your valuable feedback 🤗, it will be very helpful for me.

Narhari Kale