Scribd
Upload
6 views

8. File upload, Various types of buttons - submit, reset, image, simple button

The document covers the fundamentals of web design focusing on file uploads and various types of buttons. It explains how to create file upload fields, utilize the 'accept' and 'multiple' attributes, and describes different button types such as submit, reset, image, and simple buttons with examples. The content provides syntax and practical HTML examples for implementing these features in web forms.

Uploaded by

lakshrajsinh188
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

8. File upload, Various types of buttons - submit, reset, image, simple button

The document covers the fundamentals of web design focusing on file uploads and various types of buttons. It explains how to create file upload fields, utilize the 'accept' and 'multiple' attributes, and describes different button types such as submit, reset, image, and simple buttons with examples. The content provides syntax and practical HTML examples for implementing these features in web forms.

Uploaded by

lakshrajsinh188
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Fundamentals of Web Designing

File upload, Various types of buttons - submit, reset, image, simple


button.
File upload
 Users can pick files from their device.
 Create a field and "Browse" button for file uploads.
 Websites enable secure file uploads for data backup and access.

Syntax :
<input type="file" id="fileUpload" name="file" accept=".jpg, .jpeg, .png, .pdf" >

2
File upload
Example :
<!DOCTYPE html>
<html>
<head>
<title>File Upload Example</title>
</head>
<body>
<form action="upload.php" method="post">
<label for="fileUpload">Select a file:</label>
<input type="file" id="fileUpload" name="file">
<input type="submit" value="Upload File" >
</form>
</body>
</html>
3
File upload - Accept attribute
 Use the "accept" attribute to specify allowed file types.
 Use "accept" attribute with file format restrictions like
accept="file_type1|file_type2|file_type3".

Example :
• Images Only - <input type="file" accept="image/*">
• Document uploads - <input type="file" accept=".pdf, .doc, .docx">
• For audio - <input type="file" accept=".mp3">
• Specific file extensions - <input type="file" accept=".custom, .file, .types">

4
File upload - Multiple attribute
 The "multiple" attribute enables multiple file selection in an input
field.
 The "multiple" attribute simplifies the process of uploading multiple
files simultaneously within a single input field, enhancing user
convenience.

Example :
<input type="file" name="fileUpload" multiple>

5
Various types of buttons
 "Submit" and "Send" buttons transmit user-inputted data from
fields to a server.
 "Submit" button commonly sends form data to the server for
processing.
 "Reset" button clears form fields to their default values.
 "Image" button enables users to upload image files.
 "Simple Button" is customizable for different actions using
JavaScript or CSS.

6
Various types of buttons - Submit
 When users fill out forms on websites, such as login credentials or
order details, the submit button is clicked to initiate the
transmission of this information to the server.

Example :
<form action="process_data.php" method="post">
<!-- Form controls go here -->
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<!-- More form controls... -->
<input type="submit" value="Submit">
</form>
7
Various types of buttons – Reset
 The reset button can be useful when users want to undo their entries
or if they have made mistakes and prefer to reset the form to its initial
state without having to manually delete each field's content.
Example :
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<!-- Reset Button -->


<input type="reset" value="Reset">
</form>

8
Various types of buttons – Image
 Image buttons maintain a consistent brand look and improve
website appearance.

 For image buttons, use the `<input>` element with type="image"


and specify the image path with the src attribute.

 Clicking an image button submits the form, just like a regular submit
button.
Example :
<input type="image" src="button-image.png" alt="Submit Form">

9
Various types of buttons – Simple Button
 It allows developers to create interactive web pages by enabling custom JavaScript
functions or actions when clicked.
 The "Button" element provides flexibility and interactivity in web forms, enhancing
user experience and expanding the range of actions.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Simple Button Example</title>
</head>
<body>
<h1>Simple Button Example</h1>
<form>
<!-- Form fields go here -->
<button type="button">Click Me</button>
</form>
</body>
</html>
10
Various types of buttons – Conclusion Example
Example :
<!DOCTYPE html>
<html>
<head>
<title>File Upload and Button Types</title>
</head>
<body>
<h1>File Upload and Button Types</h1>
<form action="upload.php" method="post" enctype="multipart/form-data">
<!-- File Upload Input -->
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file"><br><br>
<!-- Submit Button -->
<input type="submit" value="Upload File"><br><br>
<!-- Reset Button -->
<input type="reset" value="Reset Form"><br><br>
<!-- Image Button -->
<input type="image" src="submit_button.png" alt="Submit" name="image_submit"><br><br>
<!-- Simple Button -->
<button type="button" >Custom Button</button>
</form>
</body>
</html>
11
Thank You…!!!

You might also like