HTML Tricks you won't believe

 



1. Accept


The accept attribute in HTML is used with the <input> element of type file to specify the types of files that the server accepts. This attribute helps in restricting the type of files that a user can select from the file input dialog.

Syntax:

<input type="file" accept="file_extension|audio/*|video/*|image/*|media_type">

Example: 

<form>
  <label for="imageUpload">Upload an image:</label>
  <input type="file" id="imageUpload" name="imageUpload" accept=".jpg, .jpeg, .png">
</form>

Output:



2. Spellcheck


The spellcheck is used to check spelling and grammar on html elements such as input.

The spellcheck attribute can be set to true or false:

  • spellcheck="true" enables spell checking.
  • spellcheck="false" disables spell checking.


Example:

<textarea spellcheck="true">This is a text area. Speling errors will be highlighted.</textarea>


3. Download


The download attribute in HTML is used to specify that the target will be downloaded when a user clicks on a hyperlink. This attribute can be applied to <a> elements, making it easy to provide downloadable files to users directly from a web page.

Example 1:

<a href="example.pdf" download>Download PDF</a>

Example 2: Downloading an Image:

<a href="image.jpg" download>Download Image</a>



4. Translate


The translate attribute in HTML is used to specify whether the content of an element should be translated by translation services such as Google Translate.

The translate attribute can be set to yes or no:

  • translate="yes": The content of the element should be translated (this is the default behavior if the attribute is not specified).
  • translate="no": The content of the element should not be translated.

Example 1:

<p translate="no">This content will not be translated: Lorem ipsum dolor sit amet.</p>


Example 2:

<p translate="yes">This content will be translated: Hello, world!</p>



5. Poster


The poster attribute to specify an image to be shown while the video is downloading.

Example 1:

<video poster="poster-image.jpg" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>


If you like this post, Kindly support me by Buy me a coffee

Previous Post Next Post