Scribd
Upload
2 views

web 1st assign

Uploaded by

msaddiqueshareef
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

web 1st assign

Uploaded by

msaddiqueshareef
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Course Title: Web Technologies

Assignment # 1

Submitted to: Amarah Abdullah


Submitted by: Taha Siddiqu
Student ID: F2023387016

University of management and


technology
School of commerce and accountancy (SCA)
HTML FORM’S CODE WITH DIFFERENT ATTRIBUTES INCLUDING CLIENT AND SEVER-SIDE
VALIDATION:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sample Form</title>

</head>

<body>

<form action="/submit-form" method="POST" enctype="multipart/form-data"


autocomplete="on">

<fieldset>

<legend>User Information</legend>

<label for="name">Full Name:</label>

<input type="text" id="name" name="name" placeholder="John Doe" required


maxlength="50" pattern="[A-Za-z\s]+" title="Please enter only letters and spaces.">

<label for="email">Email:</label>

<input type="email" id="email" name="email" placeholder="[email protected]"


required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required minlength="8"


title="Must be at least 8 characters.">
<label for="age">Age:</label>

<input type="number" id="age" name="age" min="1" max="120" required>

<label for="birthdate">Birth Date:</label>

<input type="date" id="birthdate" name="birthdate" required>

<label for="profile-picture">Profile Picture:</label>

<input type="file" id="profile-picture" name="profile-picture" accept="image/*" required>

<input type="hidden" name="source" value="webform">

</fieldset>

<fieldset>

<legend>Preferences</legend>

<label for="language">Preferred Language:</label>

<select id="language" name="language" required>

<option value="" disabled selected>Select your language</option>

<option value="english">English</option>

<option value="spanish">Spanish</option>

<option value="french">French</option>

</select>

<fieldset>

<legend>Interests:</legend>

<label><input type="checkbox" name="interests" value="coding"> Coding</label>


<label><input type="checkbox" name="interests" value="music"> Music</label>

<label><input type="checkbox" name="interests" value="sports"> Sports</label>

</fieldset>

<fieldset>

<legend>Gender:</legend>

<label><input type="radio" name="gender" value="male" required> Male</label>

<label><input type="radio" name="gender" value="female" required> Female</label>

<label><input type="radio" name="gender" value="other" required> Other</label>

</fieldset>

</fieldset>

<fieldset>

<legend>Comments</legend>

<label for="comments">Your Comments:</label>

<textarea id="comments" name="comments" rows="4" cols="50" placeholder="Write your


comments here..."></textarea>

</fieldset>

<button type="submit">Submit</button>

</form>

</body>

</html>
Explanation of Form Elements and Attributes
<form> Element:

action="/submit-form": Specifies the URL where the form data will be sent.

method="POST": Indicates that the form data will be sent using the POST method, suitable for
sensitive data (like passwords).

enctype="multipart/form-data": Necessary for file uploads, ensuring that the file data is
properly encoded.

autocomplete="on": Allows the browser to suggest previously entered values.

<fieldset> and <legend>:

Groups related form controls, enhancing organization and accessibility.

<label> Tags:

Associating labels with inputs improves accessibility and usability; screen readers can read the
label when the associated input is focused.

Input Types:

Text: Captures user names.

Email: Ensures valid email format.

Password: Enforces secure password entry with minlength.

Number: Validates that only numbers are entered and sets boundaries with min and max.

Date: Provides a date picker for user-friendly input.

File: Allows users to upload images, with an accept attribute to restrict file types.

Hidden: Sends additional data not visible to the user.

Select Dropdown:

Presents multiple options to choose from, with a default disabled prompt.

Checkboxes:

Allows multiple selections for interests.

Radio Buttons:
Allows a single selection for gender.

<textarea>:

Facilitates larger text inputs, useful for comments.

Client-side Validation:

HTML5 attributes like required, pattern, maxlength, and minlength provide basic validation
before submission, enhancing user experience by catching errors early.

Server-side Validation:

Important for security, as client-side checks can be bypassed. Always validate and sanitize
inputs on the server to protect against malicious data.

Conclusion:

This form structure promotes usability, accessibility, and security, effectively utilizing both
client-side and server-side validation techniques,

You might also like