DEV Community

Surendrababuvunnam
Surendrababuvunnam

Posted on • Edited on

Media and input tags

Hi today I am going to write about media and input tags.

media tags
the most used media tags are image(<img>),video(<video>),audio(<audio>) and iframe(<iframe)

image(<img>)

image tag and its details are written in following article :

https://dev.to/i_am_surendra_/intro-to-web-development-39gc#:~:text=a%20brief%20play%20with%20img%20tag

video(<video>):

It is a tag in HTML used to embed a video in a document. Video tag has following attributes.

  • src: The src attribute specifies the URL of the video file that you want to play.

  • poster: The poster attribute specifies an image to be displayed before the video starts playing.

  • controls: The controls attribute adds video controls, such as a play/pause button and a volume control, to the video player.

  • autoplay: The autoplay attribute specifies that the video should start playing as soon as it is ready. It is a Boolean attribute

  • loop: The loop attribute specifies that the video should start over again, from the beginning, when it reaches the end.

  • muted: The muted attribute specifies that the video's audio should be muted.

  • controlslist: The controlslist attribute, when specified, helps the browser select what controls to show for the video

  • preload: The preload attribute specifies whether or not the video should be loaded when the page loads.

width and height: The width and height attributes specify the dimensions of the video player.

audio(<audio>):
It is a tag in HTML used to embed a audio in a document. Audio tag has following attributes.

  • it has all the above attributes as video expect attributes like poster height and width

muted: A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.

iframe(<iframe>):
The iframe element in HTML is used to embed an external webpage or document into an HTML document. iframe tag has following attributes.

  • src: The src attribute specifies the URL of the webpage or document that you want to embed.

  • width and height: The width and height attributes specify the dimensions of the iframe.

  • frameborder: The frameborder attribute specifies whether or not to display a border around the iframe.

  • scrolling: The scrolling attribute specifies whether or not to display scrollbars in the iframe.

  • allow: The allow attribute is a new attribute in HTML that was introduced in HTML 5.2. It allows you to specify a list of features that should be allowed in the iframe. This attribute is used to enable or disable certain capabilities in the iframe in order to prevent malicious actions or improve security.

input tags:
The input element in HTML is used to create interactive controls for web-based forms in order to accept data from the user. The input element is one of the most important elements in HTML and is used in almost all web forms.

several types of input tags are :

  • text: The text input type is used to create a single-line text field for the user to enter a short piece of text, such as a name or email address

  • password: The password input type is used to create a single-line text field for the user to enter a password. The text entered by the user is masked to prevent it from being visible.

  • password: The password input type is used to create a single-line text field for the user to enter a password. The text entered by the user is masked to prevent it from being visible.

  • checkbox: The checkbox input type is used to create a single checkbox. The user can check or uncheck the checkbox to indicate their preference.

  • submit: The submit input type is used to create a button that the user can click to submit the form.

  • reset: The input element with the reset type is used to create a button that the user can click to reset a form to its default values. When the user clicks on the reset button, all form elements are reset to their default values, and any user input is erased.

  • number: The input element with the number type is used to create a field for the user to enter a numerical value. The number input type is used when you want to accept only numerical input from the user.

  • tel :The input element with the tel type is used to create a field for the user to enter a telephone number. The tel input type is used when you want to accept only telephone numbers as input from the user.

  • file: The input element with the file type is used to create a field for the user to select a file to upload. The file input type is used when you want to allow the user to upload a file from their computer to your website.

  • range: The input element with the range type is used to create a field for the user to select a numerical value within a specified range. The range input type is used when you want to allow the user to select a value from a range of continuous or discrete values

Top comments (0)