HTML5: How to specify the types of files that the server accepts?
Solution:
HTML Code:
<!DOCTYPE html><!-- Declaration specifying the document type -->
<html><!-- Opening tag for the root element of the HTML document -->
<head><!-- Opening tag for the document's header section -->
<meta charset="utf-8"><!-- Metadata tag specifying the character encoding of the document -->
<title>How to specify the types of files that the server accepts</title><!-- Title of the HTML document -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<form method="POST" action="https://www.w3resource.com/html-css-exercise/basic/solution/input-accept-demo.php"><!-- Form element defining a form with method and action attributes -->
<input type="file" name="my_image" accept="image/*"><!-- Input field of type file allowing the selection of image files, with the accept attribute specifying that only image files are allowed -->
<input type="submit"><!-- Submit button to submit the form data -->
</form><!-- Closing tag for the form -->
</body><!-- Closing tag for the document's body section -->
</html><!-- Closing tag for the root element of the HTML document -->
Explanation:
- This HTML code demonstrates how to create a form with an input field that allows users to select image files.
- The form is configured with the method attribute set to "POST" and the action attribute set to the URL where the form data will be submitted.
- Within the form, there is an input field of type "file" (<input type="file">) named "my_image".
- The accept attribute specifies the types of files that the server accepts. In this case, it is set to "image/*", indicating that only image files are allowed.
- Additionally, there is a submit button (<input type="submit">) to submit the form data.
Live Demo:
See the Pen input-accept-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
 |
 |
 |
 |
 |
| Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.