Input Elements in HTML

Hello everyone, In this article, we will learn about Input Elements, before Starting learning let's first learn what is an Input element

What is the Input Element?

• Input Elements are used to take input from the user.
• HTML provides a huge range of Input Tags or Elements.
• We can make the Input element more powerful with help of Attributes , so lets understand them

Attributes

HTML provides a wide range of Attributes, most commonly used Attributes are:

• name: It gives the name to input tag and is the most important attribute in form validation.

• placeholder: It tells what input value is expected from the user by providing the text on the TextField.

• class - It is used to target a group of input tags.

Types of Input Element

1. Text

• Input Type Text is used to accept the input from the user in form of text,
• Eg: firstName, lastName, address, etc.

Example:

<input type="text" name="" id="" placeholder="Enter your Name" />

2. Email

• Type Email is used to accept the EMAIL Address from the User
• Type Email also adds an email validation check whether the entered email is correct or not

Example:

<input type="email" name="" id="" placeholder="Enter your Email" />

3. Password

• Type Password is used to accept the Password from the user
• The specialty of this input element is whatever is being typed in this is hidden and black dots are displayed.

Example

<input type="password" name="" id="" placeholder="Enter your Email" />

4. Hidden

• As the name suggests hidden this element is hidden on the browser but the value specified in this is submitted to the server.
• It is used to hide the value from the user

Example

<input type="hidden" name="" />

• Output screen will be empty as it will hidden in the browser

5. CheckBox:

• Type CheckBox is used when we want to select or deselect multiple values .
• Type CheckBox is used when the user needs to select multiple options eg: Skills, Hobbies, Interests, etc
• Type CheckBox will have a Value Attributes and that attribute value will be going to the Backend

Example

  <input type="checkbox" name="Book Reading" id="" value="book" />Book Reading
    <input type="checkbox" name="Walking" id="" value="walk" />Walking
    <input type="checkbox" name="Playing Games" id="" value="games" />Playing Games 
    <input type="checkbox" name="Cricket" id="" value="Cric" />Cricket

6.Radio

• Type Radio is used to select only ONE option from multiple options
• Type Radio is maximumly used in Gender Selection where the user needs to select only One option from multiple options
• To Select only one option from multiple options, we need to group the radio Button, we can group them by providing the name Attribute to all the radio buttons by assigning the same value
• In this case, we have assigned gender

Example

    <input type="radio" name="gender" id="" />Male
    <input type="radio" name="gender" id="" />Female
    <input type="radio" name="gender" id="" />Other

7. Color

• It gives a beautiful color palette option to choose or pick a color. The default is black color.

Example

<input type="color" name="color" id="color">

8. File

• It is used for uploading files. Files can be anything be it an image, Docx, pdf, etc.
• Type File is mainly used when the user needs to upload his/her Phots

Example

<input type="file" name="file" id="file">

9. Range

• It displays a range widget where we can choose the value by sliding it.
• The default is set to middle.
• It has attributes like min and max where we can set the minimum and maximum range.

Example

<input type="range" name="range" id="range" min="1" max="10">

10. Button

• Type Button is used to to perform some action
• Most commonly used button is Type Submit
• Type Submit is used to Submit the form data

Example

<input type="submit" value="Submit">

11. Audio

• The audio tag is used to embed sound content in a document, such as music or audio content, etc.
• We will provide the link in the source element and in the type, we will just inform which type is the audio like mp3, Ogg, etc.

The Audio tag has some attributes which we can include:

• src: where we can include the URL of the audio.
• controls: which are used to play and pause the audio/videos.
• loop: which is used to play again, every time it is finished.
• muted: by default the audio/video will be muted.
• width and height: we can also change the height and width of the audio/videos.

Example

<audio controls>
        <source src="music.mp3" type="audio/mpeg">    
</audio>

12. Video

• The HTML video tag is used to display a video on a web page. we can provide the URL of the video in the src attribute.

The Video tag has some attributes which we can include:

• src: where we can include the URL of the audio.
• controls: which are used to play and pause the audio/videos.
• loop: which is used to play again, every time it is finished.
• muted: by default the audio/video will be muted.
• width and height: we can also change the height and width of the audio/videos

Example

<video controls>
        <source src="./vedios/Doctor.Strange.2016.720p.BluRay.x264-[YTS.AG].mp4">
</video>

Thanks, for reading the Article, Please give your valuable Feedback