Home > Article > Web Front-end > How to select multiple files using HTML input tags?
How to select multiple files using HTML input tags?
- WBOYforward
- 2023-08-23 21:01:021300browse
The HTML input tag is a powerful tool that allows developers to create dynamic web pages. One useful feature of the input tag is the ability to select multiple files at once.
HTML input tag is a commonly used element for creating web forms and enabling users to interact with web applications. One of the most common use cases for input tags is a file selection where a user can choose one or more files to be uploaded.
The input tag in HTML has various attributes that allow us to customize the behavior of the tag. The most commonly used attribute for file selection is the "type" attribute with a value of "file". This attribute tells the browser that the input element is used for selecting a file.
Syntax
<input type="file" name="files" multiple>
In the above syntax −
The input tag is used to create a user input field on a webpage.
The type attribute specifies the type of input field. In this case, we are using type="file" to create a file upload field.
The name attribute specifies the name of the file input field. This name will be used to identify the file input field when the form is submitted.
The multiple attribute specifies that the user can select multiple files for upload.
Creating an HTML Input Tag for File Uploads
To create an HTML input tag for file uploads that allows users to select multiple files, we will use the following HTML code −
<input type="file" name="fileUpload" multiple>
In this example, we use the "file" type attribute to create an input tag for file uploads. We also specify a name attribute for the input tag so that we can identify the uploaded files on the server-side.
Adding Labels to the Input Tag
It is a good practice to add a label to the file input tag so that users know what type of files they should upload. Here is an example of how to add a label to the file input tag −
<label for="fileUpload">Choose the files to upload:</label> <input type="file" id="fileUpload" name="files[]" multiple>
In this example, we use the "for" attribute of the label tag to link the label with the file input tag. We also use the "id" attribute of the input tag to match it with the label.
Styling the File Input Field
The default look of the file input field looks unattractive and may not fit with the design of the website. So, we use the CSS for styling the file input field.
Example 1
Here is an example of a basic file input field with multiple attributes.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
</style>
</head>
<body>
<h3>Basic file input field with multiple attributes</h3>
<p> You can choose multiple files below
<form method="post" action="upload.php" enctype="multipart/form-data">
<label for="fileUpload">Choose files:</label>
<input type="file" id="fileUpload" name="files[]" multiple>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Example 2
Here is another example of a file input field with custom styling.
<!DOCTYPE html>
<html>
<head>
<style>
body{ text-align:center; }
.file-upload {
overflow: hidden;
display: inline-block;
background-color: #009688;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.file-upload input[type=file] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
.submit-btn{
display: inline-block;
background-color: #544000;
color: #fff;
padding: 10px;
width:125px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>File input field with custom styling</h3>
<form method="post" action="upload.php" enctype="multipart/form-data">
<label class="file-upload"> Choose Files
<input type="file" name="files[]" multiple>
</label> <br>
<input class="submit-btn" type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Conclusion
In this article, we have discussed how to select multiple files using the HTML input tag. By adding the multiple attribute to the input tag, users can select multiple files for upload. We have also shown how to style the file input field. With these techniques, you can create a user-friendly file upload feature for the web application.
The above is the detailed content of How to select multiple files using HTML input tags?. For more information, please follow other related articles on the PHP Chinese website!