HTML 5 accept attribute

This article will understand the working of the HTML5 accept attribute.

What do you mean by accepting attributes in HTML5?

In HTML, accept attribute specifies a filter for what file types the user can pick from the file input dialog box. This attribute can only be used with <input type=”file”>. It allows a browsers to only show files that are allowed for the current input.

Syntax:

In the above syntax, we can either pass an extension of the file or a type of file you want to select from a file upload option such as image, audio, video, etc.

Following are the various examples of HTML 5 accept attributes.

Example 1:

  <! DOCTYPE html>  <html>  <head>  <meta charset = “utf-8”>          <meta name = “viewport” content = “width=device-width, initial-scale = 1.0”>          <title> HTML5 accept attribute </title>          <link rel = “stylesheet” href=”https://codepen.io/gymratpacks/pen/VKzBEp#0″>          <link href = ‘https://fonts.googleapis.com/css?family=Nunito:400,300’ rel = ‘stylesheet’ type = ‘text/css’>  <style>  @import url(https://fonts.googleapis.com/css?family=Roboto:400,300);  * { box-sizing: border-box; }  html { height: 100%; }     body {        color: #000;        height: 100vh;        background-color: #FBAB7E;        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);     }     h1 {    position: relative;    padding: 0;    margin: 0;    font-family: “Raleway”, sans-serif;    font-weight: 300;    font-size: 40px;    color: #080808;    -webkit-transition: all 0.4s ease 0s;    -o-transition: all 0.4s ease 0s;    transition: all 0.4s ease 0s;    text-align: center;  }  form {    position: absolute;    top: 20;    left: 50%;    width: 500px;    transform: translateX(-50%);    margin: 2rem 1;    z-index: 1;  }  fieldset {    margin: 0 0 1rem 0;    padding: 0;    border: none;  }  legend {   font-weight: bold;  }  Legend {    display: inline-block;    margin-bottom: .5rem;   font-weight: bold;  }  label {    display: inline-block;    margin-bottom: .5rem;    font-weight: bold;  }  input[type=’text’] {    display: block;    padding: .5rem;    width: 100%;    background-color: white;    border-radius: .35rem;    border: 1px solid #e5e5e5;    outline: none;    transition-property: none;    transition-duration: none;     &:focus {      border-color: rgb(239,126,173);    }  }  textarea {    display: block;    padding: .5rem;    width: 100%;    background-color: white;    border-radius: .25rem;    border: 1px solid #e5e5e5;    outline: none;    transition-property: none;    transition-duration: none;      &:focus {      border-color: rgb(239,126,173);    }  }  select {    display: block;    padding: .5rem;    width: 100%;    background-color: white;    border-radius: .25rem;    border: 1px solid #e5e5e5;    outline: none;    transition-property: none;    transition-duration: none;      &:focus {      border-color: rgb(239,126,173);    }  }  textarea {    max-width: 500px;    height: 100px;  }  input[type=’text’] {    height: 34px;  }  select {    font-size: .875rem;    height: 34px;  }  input[type=’checkbox’] {    position: relative;    top: 5px;    width: 24px;    height: 22px;    margin: 0 .5rem;    background-color: white;    border: 1px solid #e5e5e5;    outline: none;    -moz-appearance: none;    -webkit-appearance: none;    transition-property: none;    transition-duration: none;  }    input[type=’radio’] {    position: relative;    top: 5px;    width: 24px;    height: 22px;    margin: 0 .6rem;    background-color: white;    border: 1px solid #e5e5e5;    outline: none;    -moz-appearance: none;    -webkit-appearance: none;    transition-property: none;    transition-duration: none;  }  input[type=’checkbox’] {    border-radius: 5px;    &:checked {      background-color: rgb(239,126,173);       border: none;      &:after {        display: block;        content: ‘ ‘;        height: 4px;        width: 10px;        border-bottom: 3px solid #fff;        border-left: 3px solid #fff;        transform: translate(5px,6px) rotate(-45deg) scale(1);      }    }  }  input[type=’radio’] {    border-radius: 50%;      &:checked {      border-width: 5px;      border-color: white;      background-color: rgb(239,126,173);    }  }  button {    display: block;    margin: 1em auto;    padding: .5rem 2rem;    font-size: 125%;    color: white;    border: none;    border-radius: .25rem;    background-color: rgb(92 34 8);    outline: none;    box-shadow: 0 .4rem .1rem -.3rem rgba(0,0,0,.1);     transform: perspective(300px) scale(.95) translateZ(0);    transform-style: preserve-3d;      transition-property: none;      transition-duration: none;        &:hover {      cursor: pointer;      background-color: rgb(255,150,200);      box-shadow: 0 0 0 0 rgba(0,0,0,0);      transform: scale(1.1) rotateX(0);    }    &:active {      background-color: rgb(239,126,173);      transform: scale(1.05) rotateX(-10deg);    }  }  </style>  <h1> HTML5 accept attribute Example </h1>  <form>     <fieldset>      <label for = “firstName”> Full Name </label>      <input type = “text” name = “name” id = “firstName” spellcheck = “true” placeholder = “First Name”>    </fieldset>    <fieldset>      <legend> Qualification </legend>      <input type = “checkbox” id = “check1” name = “checkboxes” checked>      <label for = “check1”> BCA </label> <br>      <input type = “checkbox” id = “check2” name = “checkboxes”>      <label for = “check2”> MCA </label> <br>  <input type = “checkbox” id = “check2” name = “checkboxes”>      <label for = “check2”> BA </label> <br>  <input type = “checkbox” id = “check2” name = “checkboxes”>      <label for = “check2”> MSC IT </label> <br>    </fieldset>    <fieldset>      <legend> Gender </legend>      <input type = “radio” id = “radio1” name = “radios” checked>      <label for = “radio1”> Male </label> <br>      <input type = “radio” id = “radio2” name = “radios”>      <label for = “radio2”> Female </label> <br>      <input type = “radio” id = “radio2” name = “radios”>  <label for = “radio2″> Transgender </label> <br>    </fieldset>    <fieldset>      <label for=”select-choice”> Select Hobbies </label>      <select name = “select-choice” id = “select-choice”>        <option value = “Choice 1”> – – select one – – </option>        <option value = “Choice 2”> Dancing </option>        <option value = “Choice 2”> Singing </option>        <option value = “Choice 2”> Playing </option>        <option value = “Choice 2”> Cooking </option>      </select>    </fieldset>  <p>    <label for = “imageFile”> Select some images: </label>    <input type = “file” id = “imageFile” accept = “image/*” multiple>  </p>    <button> Submit </button>  </form>    </body>  </html>  

Explanation:

In the above example, we have created an example of the accept attribute. In this, we have uploaded only the image from the file input box.

In this

<input> tag is used to get the input from the user
type=”file” used to specifies the file input.
accept parameter is used to specifies that the server accepted file types.
“image/*” is define the input file must be image format.
multiple attribute means we can upload multiple image files from the input dialog box.

Output:

Following is the output of this example.

HTML 5 accept attribute

Example 2:

  <! DOCTYPE html>  <html>  <head>  <meta charset = “utf-8”>          <meta name = “viewport” content = “width=device-width, initial-scale = 1.0”>          <title> HTML5 accept attribute </title>          <link rel = “stylesheet” href=”https://codepen.io/gymratpacks/pen/VKzBEp#0″>          <link href = ‘https://fonts.googleapis.com/css?family=Nunito:400,300’ rel = ‘stylesheet’ type = ‘text/css’>  <style>  @import url(https://fonts.googleapis.com/css?family=Roboto:400,300);  * { box-sizing: border-box; }  html { height: 100%; }     body {        color: #000;        height: 100vh;        background-color: #FBAB7E;        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);     }     h1 {    position: relative;    padding: 0;    margin: 0;    font-family: “Raleway”, sans-serif;    font-weight: 300;    font-size: 40px;    color: #080808;    -webkit-transition: all 0.6s ease 0s;    -o-transition: all 0.6s ease 0s;    transition: all 0.6s ease 0s;    text-align: center;  }  form {    position: absolute;    top: 40;    left: 50%;    width: 510px;    transform: translateX(-50%);    margin: 2rem 1;    z-index: 1;  }  fieldset {    margin: 0 0 1rem 0;    padding: 1;    border: none;  }  legend {   font-weight: bold;  }  label {    display: inline-block;    margin-bottom: .5rem;    font-weight: bold;  }  input[type=’text’] {    display: block;    padding: .5rem;    width: 100%;    background-color: white;    border-radius: .25rem;    border: 1px solid #e5e5e5;    outline: none;    transition-property: none;    transition-duration: none;     &:focus {      border-color: rgb(239,126,173);    }  }  Legend {    display: inline-block;    margin-bottom: .5rem;   font-weight: bold;  }  textarea {    display: block;    padding: .5rem;    width: 100%;    background-color: white;    border-radius: .25rem;    border: 1px solid #e5e5e5;    outline: none;    transition-property: none;    transition-duration: none;      &:focus {      border-color: rgb(239,126,173);    }  }  select {    display: block;    padding: .5rem;    width: 100%;    background-color: white;    border-radius: .25rem;    border: 1px solid #e5e5e5;    outline: none;    transition-property: none;    transition-duration: none;      &:focus {      border-color: rgb(239,126,173);    }  }  textarea {    max-width: 500px;    height: 100px;  }  input[type=’text’] {    height: 34px;  }  select {    font-size: .875rem;    height: 34px;  }  input[type=’checkbox’] {    position: relative;    top: 5px;    width: 22px;    height: 22px;    margin: 0 .5rem;    background-color: white;    border: 1px solid #e5e5e5;    outline: none;    -moz-appearance: none;    -webkit-appearance: none;    transition-property: none;    transition-duration: none;  }    input[type=’radio’] {    position: relative;    top: 5px;    width: 22px;    height: 22px;    margin: 0 .5rem;    background-color: white;    border: 1px solid #e5e5e5;    outline: none;    -moz-appearance: none;    -webkit-appearance: none;    transition-property: none;    transition-duration: none;  }  input[type=’checkbox’] {    border-radius: 5px;    &:checked {      background-color: rgb(239,126,173);       border: none;      &:after {        display: block;        content: ‘ ‘;        height: 4px;        width: 10px;        border-bottom: 3px solid #fff;        border-left: 3px solid #fff;        transform: translate(5px,6px) rotate(-45deg) scale(1);      }    }  }  input[type=’radio’] {    border-radius: 50%;      &:checked {      border-width: 5px;      border-color: white;      background-color: rgb(239,126,173);    }  }  button {    display: block;    margin: 1em auto;    padding: .5rem 2rem;    font-size: 125%;    color: white;    border: none;    border-radius: .35rem;    background-color: rgb(92 34 8);    outline: none;    box-shadow: 0 .4rem .1rem -.3rem rgba(0,0,0,.1);     transform: perspective(300px) scale(.95) translateZ(0);    transform-style: preserve-3d;      transition-property: none;      transition-duration: none;        &:hover {      cursor: pointer;      background-color: rgb(255,150,200);      box-shadow: 0 0 0 0 rgba(0,0,0,0);      transform: scale(1.1) rotateX(0);    }    &:active {      background-color: rgb(239,126,173);      transform: scale(1.05) rotateX(-10deg);    }  }  </style>  <h1> HTML5 accept attribute Example </h1>  <form>     <fieldset>      <label for = “firstName”> Full Name </label>      <input type = “text” name = “name” id = “firstName” spellcheck = “true” placeholder = “First Name”>    </fieldset>    <fieldset>      <legend> Qualification </legend>      <input type = “checkbox” id = “check1” name = “checkboxes” checked>      <label for = “check1”> BCA </label> <br>      <input type = “checkbox” id = “check2” name = “checkboxes”>      <label for = “check2”> MCA </label> <br>  <input type = “checkbox” id = “check2” name = “checkboxes”>      <label for = “check2”> BA </label> <br>  <input type = “checkbox” id = “check2” name = “checkboxes”>      <label for = “check2”> MSC IT </label> <br>    </fieldset>    <fieldset>      <legend> Gender </legend>      <input type = “radio” id = “radio1” name = “radios” checked>      <label for = “radio1”> Male </label> <br>      <input type = “radio” id = “radio2” name = “radios”>      <label for = “radio2”> Female </label> <br>      <input type = “radio” id = “radio2” name = “radios”>  <label for = “radio2″> Transgender </label> <br>    </fieldset>    <fieldset>      <label for=”select-choice”> Select Hobbies </label>      <select name = “select-choice” id = “select-choice”>        <option value = “Choice 1”> – – select one – – </option>        <option value = “Choice 2”> Dancing </option>        <option value = “Choice 2”> Singing </option>        <option value = “Choice 2”> Playing </option>        <option value = “Choice 2”> Cooking </option>      </select>    </fieldset>    <p>    <label for = “soundFile”> Select an audio file: </label>    <input type = “file” id = “soundFile” accept = “audio/*”>  </p>    <button> Submit </button>  </form>    </body>  </html>  

Explanation:

In the above example, we have created an example of the accept attribute. In this, we have uploaded only the audio from the file input box.

In this

<input> tag is used to get the input from the user
type=”file” used to specifies the file input.
accept parameter is used to specifies that the server accepted file types.
“audio/*” is define the input file must be audio format.

Output:

Following is the output of this example.

HTML 5 accept attribute

Example 3:

  <! DOCTYPE html>  <html>  <head>  <meta charset = “utf-8”>          <meta name = “viewport” content = “width=device-width, initial-scale = 1.0”>          <title> HTML5 accept attribute </title>          <link rel = “stylesheet” href=”https://codepen.io/gymratpacks/pen/VKzBEp#0″>          <link href = ‘https://fonts.googleapis.com/css?family=Nunito:400,300’ rel = ‘stylesheet’ type = ‘text/css’>  <style>  @import url(https://fonts.googleapis.com/css?family=Roboto:400,300);  * { box-sizing: border-box; }  html { height: 100%; }     body {        color: #000;        height: 100vh;        background-color: #FBAB7E;        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);     }     h1 {    position: relative;    padding: 0;    margin: 0;    font-family: “Raleway”, sans-serif;    font-weight: 300;    font-size: 40px;    color: #080808;    -webkit-transition: all 0.4s ease 0s;    -o-transition: all 0.4s ease 0s;    transition: all 0.4s ease 0s;    text-align: center;  }  form {    position: absolute;    top: 30;    left: 50%;    width: 500px;    transform: translateX(-50%);    margin: 2rem 0;    z-index: 1;  }  fieldset {    margin: 0 1 1rem 0;    padding: 1;    border: none;  }  legend {   font-weight: bold;  }  Legend {    display: inline-block;    margin-bottom: .5rem;   font-weight: bold;  }  input[type=’text’] {    display: block;    padding: .5rem;    width: 100%;    background-color: white;    border-radius: .25rem;    border: 1px solid #e5e5e5;    outline: none;    transition-property: none;    transition-duration: none;     &:focus {      border-color: rgb(239,126,173);    }  }  label {    display: inline-block;    margin-bottom: .5rem;    font-weight: bold;  }  textarea {    display: block;    padding: .5rem;    width: 100%;    background-color: white;    border: 1px solid #e5e5e5;    outline: none;    transition-property: none;    border-radius: .25rem;    transition-duration: none;      &:focus {      border-color: rgb(259,126,173);    }  }  select {    display: block;    padding: .8rem;    width: 100%;    outline: none;    background-color: white;    border-radius: .25rem;    border: 1px solid #e5e5e5;    transition-property: none;    transition-duration: none;      &:focus {      border-color: rgb(239,126,173);    }  }  textarea {    max-width: 500px;    height: 100px;  }  input[type=’text’] {    height: 34px;  }  input[type=’checkbox’] {    position: relative;    top: 6px;    width: 22px;    height: 23px;    margin: 0 .5rem;    background-color: white;    border: 1px solid #e5e5e5;    outline: none;    -moz-appearance: none;    -webkit-appearance: none;    transition-property: none;    transition-duration: none;  }  select {    font-size: .885rem;    height: 34px;  }    input[type=’radio’] {    position: relative;    top: 5px;    width: 22px;    height: 23px;    margin: 0 .5rem;    background-color: white;    border: 1px solid #e5e5e5;    outline: none;    -moz-appearance: none;    -webkit-appearance: none;    transition-property: none;    transition-duration: none;  }  input[type=’checkbox’] {    border-radius: 5px;    &:checked {      background-color: rgb(239,126,173);       border: none;      &:after {        display: block;        content: ‘ ‘;        height: 4px;        transform: translate(5px,6px) rotate(-45deg) scale(1);        width: 12px;        border-bottom: 3px solid #fff;        border-left: 3px solid #fff;      }    }  }  input[type=’radio’] {    border-radius: 51%;      &:checked {  background-color: rgb(239,126,173);      border-width: 6px;      border-color: white;        }  }  button {    display: block;    margin: 1em auto;    padding: .5rem 2rem;    font-size: 125%;    color: white;    border: none;    border-radius: .25rem;    background-color: rgb(92 34 8);    outline: none;    box-shadow: 0 .4rem .1rem -.3rem rgba(0,0,0,.1);     transform: perspective(300px) scale(.95) translateZ(0);    transform-style: preserve-3d;      transition-property: none;      transition-duration: none;        &:hover {      cursor: pointer;      background-color: rgb(255,150,200);      box-shadow: 0 0 0 0 rgba(0,0,0,0);      transform: scale(1.1) rotateX(0);    }    &:active {      background-color: rgb(239,126,173);      transform: scale(1.05) rotateX(-10deg);    }  }  </style>  <h1> HTML5 accept attribute Example </h1>  <form>     <fieldset>      <label for = “firstName”> Full Name </label>      <input type = “text” name = “name” id = “firstName” spellcheck = “true” placeholder = “First Name”>    </fieldset>    <fieldset>      <legend> Qualification </legend>      <input type = “checkbox” id = “check1” name = “checkboxes” checked>      <label for = “check1”> BCA </label> <br>      <input type = “checkbox” id = “check2” name = “checkboxes”>      <label for = “check2”> MCA </label> <br>  <input type = “checkbox” id = “check2” name = “checkboxes”>      <label for = “check2”> BA </label> <br>  <input type = “checkbox” id = “check2” name = “checkboxes”>      <label for = “check2”> MSC IT </label> <br>    </fieldset>    <fieldset>      <legend> Gender </legend>      <input type = “radio” id = “radio1” name = “radios” checked>      <label for = “radio1”> Male </label> <br>      <input type = “radio” id = “radio2” name = “radios”>      <label for = “radio2”> Female </label> <br>      <input type = “radio” id = “radio2” name = “radios”>  <label for = “radio2″> Transgender </label> <br>    </fieldset>    <fieldset>      <label for=”select-choice”> Select Hobbies </label>      <select name = “select-choice” id = “select-choice”>        <option value = “Choice 1”> – – select one – – </option>        <option value = “Choice 2”> Dancing </option>        <option value = “Choice 2”> Singing </option>        <option value = “Choice 2”> Playing </option>        <option value = “Choice 2”> Cooking </option>      </select>    </fieldset>  <p>    <label for = “videoFile”> Select a video file: </label>    <input type = “file” id = “videoFile” accept = “video/*”>  </p>    <button> Submit </button>  </form>    </body>  </html>  

Explanation:

In the above example, we have created an example of the accept attribute. In this, we have uploaded only the video from the file input box.

In this

<input> tag is used to get the input from the user
type=”file” used to specifies the file input.
accept parameter is used to specifies that the server accepted file types.
“video/*” is define the input file must be video format.

Output:

Following is the output of this example.

HTML 5 accept attribute

Next TopicHTML Color Styles

HTML 5 accept attribute

HTML 5 accept attribute

What do you mean by accepting attributes in HTML5?

Example 1:

Example 2:

Example 3:

How to unarchive in Gmail

Example of sending email in Java through Gmail Server

You may also like