Input & audio/video tags in HTML
A comprehensive overview of mostly used Input and Audio /Video tags in HTML
Input elements in HTML
In HTML, the input field can be specified using where a user can enter data. The input tag is used within < form> element to declare input controls that allow users to input data. An input field can be of various types depending upon the attribute type. The Input tag is an empty element which only contains attributes. Input elements can be used outside of the form tag but the most suitable use case will be the input tag within the form tag. Form word itself defines that some sort of data can be inserted here so the user has to insert data inside the input tag. A wide variety of types of input data and controls are available in HTML.
Input types with attributes
which type of data is to be inserted in the input tag is defined by its input type. Here type is an attribute of the input element, if this attribute is specifically not used then the default type will be type='text'. Let's discuss some of the most used input type
button:- A push button is rendered without any value in it, a caption of the button or value has to be provided.
Attributes of button :-
value- attribute contains a string that is the caption of a button, which displays on the button.
disabled- Enabling or disabling the button using the attribute disabled to true or false,
can be done by just specifying the disabled attribute in the input tag.
<input type='button' value=''> <--button with no value-->
<input type='button' value='click me'> <--button with value attribute-->
<input type='button' value='click me' disabled> <--button with value attribute and disabled set to true-->
checkbox:- A checkbox type allows a single value to be checked/unchecked. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Attributes of checkbox:-
value -The value of the checkbox is represented by a string. This value property is for the server side in the case of the checkbox.
value attribute must contain text it is good practice, it cannot remain empty.
checked - checked attribute is a boolean type, it indicates whether this checkbox is checked by default when the page loads. It does not indicate whether this checkbox is currently checked
<input type="checkbox" value="HTML" name="language">html
<input type="checkbox" value="CSS" name="language">CSS
<input type="checkbox" value="javaScript" name="language">javaScript
color- Type color provides a user specify a desired colour either by using a visual colour picker tool or by particularly entering the colour into a text field in #rrggbb hex format. Depending on browser support, a colour picker can show up in the input field.
Attributes of color-
- value- The value attribute of an input type color which contains a 7-characters string specifying an RGB colour in hex format, also you can input the colour in uppercase and lowercase as well. The value can never be empty as it is the most important attribute in color type input
<input type="color" id="favcolor" name="favcolor" value='#e346567'>
date- input type date provides the user to select a date. It is a control for selecting a particular date, on clicking the calendar icon a calendar pops-up
so the user can select a desired date. Year, Month, and day can be selected
Attributes in date-
value- Default value can be passed within the value attributes in the form of a string. The format of the date is according to ISO8601.
max- The value of the max attribute must obey the format yyyy-mm-dd then the input of date type can be limited to maximum date value. It accepts the latest date if the date entered is afterwards it fails to validate.
min- It can accept earliest date, the value entered occurs before it fails the validation. It also has to be in the correct date format of yyyy-mm-dd
<input type="date" id="birthday" name="birthday" value="2014-03-01">
<input type="date" id="birthday" name="birthday" value="2014-03-01" max="2017-06-30">
<input type="date" id="birthday" name="birthday" value="2014-03-01" min="2012-01-01">
email - is used for input fields that should contain an email address. It looks like a text input but the validation property can be set by which the field will automatically validate the value entered in the field. The required flag can be set to true if it is then the submission of the form can not be proceeded without providing a proper value which must be in email format in the input field.
Attributes of email-
value - This attribute is common in all input-type elements, but in particular input types the working is somewhat different. In the case of email, the value attribute validates conforming email syntax it takes data in string format.
maxlength - This attribute sets a limit to accept data into the email field, more than this max length the user cannot exceed the email. The value of maxlength must be an integer value of 0 or higher. If no value or invalid value is specified no maxlength is set on the email type input element.
minlength- The minimum number of characters the user can enter into the email input is defined by the attribute minlength.This value must be a positive number smaller or equal to maxlength value but not greater than that. If the value is not provided in an accurate format the minlength attribute will not be set and has no effect.
<input type="email" id="email" name="email" placeholder='Enter your email' required> <input type="email" id="email" name="email" placeholder='Enter your email' required maxlength="30"> //with maxlenght <input type="email" id="email" name="email" placeholder='Enter your email' required minlength="30"> //with minlength
password- Type password of input elements let the user enter their password secretly it provides confidentiality and security.
The element is rendered as a one-line input field in which the text is encapsulated or we can say covered with some special characters to enhance its security level so that it is not easily readable. It converts the typed input to either an asterisk(*) or a dot(.).
This conversion depends upon the user agent and operating system. If the required property is specified, then the password type input field must contain a value other than an empty string to be valid.
Attributes of password-
maxlength - This attribute limits to insert data into the password field, more than this max length the user cannot insert values into password field. The value of maxlength must be an integer value of 0 or higher. If no value or invalid value is specified no maxlength is set on the password type input element.
minlength- The minimum number of characters the user can enter into the password input is defined by the attribute minlength.This value must be a non-zero number smaller or equal to maxlength value but not greater than that. If the value is not provided in an accurate format the minlength attribute will not be set then the password input has no minimum length.
<input type="password" id="pass" name="password" required placeholder="Enter your password">
radio-It allows the user to select a single value to be selected out of multiple options for the same name value .radio type input elements are used in radio groups. Radio buttons are rendered as small circles which are filled on the selection of a button. You can have as many radio groups on a page as you like, as long as each has its unique name,don't forget to set your value attributes!
Attributes of radio-
checked - This is a boolean attribute, if set then it will indicate that this radio button is the default one selected in the group on the page refresh it will remain selected.
value - The value attribute is one in which all inputs share; however, it serves a special purpose for inputs of type radio when a form is submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the value attribute.
required - This attribute is also shared by almost all inputs.if any radio button in a same-name group of radio buttons is set to true then one of them must be checked, although it doesn't have to be the one with the attribute applied.
<input type="radio" name="gender" id="" value="male">male
<input type="radio" name="gender" id="" value="female" required>female
reset - A button that resets all the filled or selected content of the form to its default values . These reset-type inputs are rendered as buttons on the page. It triggers an event by clicking the button which resets all the inputs.
Attributes of reset -
- value - An input type element's value attribute contains a string that is used as the button's label. Buttons such as reset don't have a value otherwise.If you don't specify a value, you get a button with the default label (typically "Reset," but this will vary depending on the client's browser.
<input type="reset" value="Reset"/>
Submit- Input elements of type submit are rendered as buttons. An event occurs on clicking the button the form get submitted to the server.
Attributes of Submit -
- value - An input type element's value attribute contains a string that is used as the button's label. Buttons such as submit also don't have a value otherwise. If you don't specify a value, you get a button with the default label (typically "submit," but this will vary depending on the client's browser.
<input type="submit" value="Submit"/>
Text- It renders basic single-line text fields on the page.
Attributes of Text-
maxlength - This attribute allows to insert text into the text field, more than this max length the user cannot enter text into text field. The value of maxlength must be an integer value of 0 or higher. If no value or invalid value is specified no maxlength is set on the text type input element.
minlength- The minimum number of characters the user can enter into the text input is defined by the attribute minlength.This value must be a non-zero number smaller or equal to maxlength value but not greater than that. If the value is not provided in proper format the minlength attribute will not be set then the text input has no minimum length and can take any number of characters.
<input type='text' placeholder='Enter your name' maxlength='12'>//with maxlength
<input type='text' placeholder='Enter your name' minlength='4'>//with minlength
Audio Tag in HTML
audio - The audio tag is used to embed sound content in a document, such as music or other audio streams. The audio tag contains one or more source tags with different audio sources. The browser will choose the first source it supports.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
Attributes of audio -
autoplay - It Specifies that the audio will start playing as soon as it is ready
loop - It defines that the audio will start over again, every time it is finished .
src - It specifies the location(URL) of that audio file
controls - This is s boolean attribute when set ,it specifies that audio control should be displayed .It provides controls as follows:-
play
pause
seeking volume
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Video Tag in HTML
Video- This HTML element embeds a media player,a video element is used for playing videos or movies, and audio files with captions.
Attributes of video -
autoplay - It Specifies that the audio will start playing as soon as it is ready
loop - It defines that the video will seek back to the start
upon reaching at the end of the video.
src - It specifies the location(URL) of that video file
width - It specifies how much width will be allocated to the video player on the webpage
controls - This is s boolean attribute when set ,it specifies that video control should be displayed .It provides controls as follows:-
play
pause/resume
seeking volume
including volume
<video width="320" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
In this article, I only shared some of mostly used input elements types there are much more to learn ,covering all input elements in one article is not possible. whichever topics i have covered are enough for the go, I hope to share more with you all in the near future. For now, I wanted to start off with some of the most important ones. I hope some of these information will be useful to you all. Thanks for reading !!!