CSS (Client Side Scripting)
Day 3.2:
Chapter 3 : Form and Event Handling
Form Controls:
<input> Tag:
The most commonly used form element. The type attribute defines the type of data that the
input will accept.
<input type="text" name="username" placeholder="Enter your username">
Common types of input fields include:
● text: Single-line text input.
● password: Password input that hides the text.
● email: Input for email addresses.
● number: Numeric input.
● checkbox: A checkbox input.
● radio: A radio button input.
● submit: A button to submit the form.
● file: For file uploads.
1. Button Element (<button>)
The <button> element represents a clickable button, which can be used to submit forms or
trigger JavaScript functions.
<button type="submit">Submit</button>
<button type="button" onclick="alert('Button clicked!')">Click Me</button>
● The first button submits a form.
● The second button triggers a JavaScript alert when clicked.
2. Text Element (<input type="text">)
The <input type="text"> element creates a single-line text input field where users can enter text.
<label for="name">Name:</label>
<input type="text" id="name" name="name">
This creates a text field where users can input their name.
3. Textarea Element (<textarea>)
The <textarea> element creates a multi-line text input field, suitable for larger amounts of text
input.
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
This creates a text area where users can enter a longer message.
4. Checkbox Element (<input type="checkbox">)
The <input type="checkbox"> element creates a checkbox, which allows users to select one or
more options from a list.
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe">
This creates a checkbox that users can check to subscribe to a newsletter.
5. Radio Button Element (<input type="radio">)
The <input type="radio"> element creates a radio button, which allows users to select only one
option from a set.
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
This creates two radio buttons, allowing the user to select their gender (either Male or Female).
6. Select Element (<select>)
The <select> element creates a dropdown list, allowing users to choose one option from a list of
options.
<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
This creates a dropdown menu where users can select their country.
Form Events:
Common HTML Form Events:
onsubmit Event
Triggered: When the form is submitted.
Use: Often used to validate form data before sending it to the server.
Example:
<form onsubmit="return validateForm()">
<input type="text" name="username" id="username">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
const username = document.getElementById("username").value;
if (username === "") {
alert("Username must be filled out");
return false; // Prevent form submission
}
return true; // Allow form submission
}
</script>
Explanation: The form will only submit if the validateForm() function returns true. Otherwise, an
alert is shown, and submission is prevented.
Example :
<html>
<head></head>
<body>
<form onsubmit="return validateForm()">
<h3>Registration Form</h3>
<label>Username : </label><br>
<input type="text" name="username" id="username" placeholder="Enter your
username." />
<br><br>
<label>Email Id : </label><br>
<input type="email" name="email" placeholder="Enter your email id." />
<br><br>
<label>Mobile no : </label><br>
<input type="number" name="mobileno" placeholder="Enter your mobile no." />
<br><br>
<label>Select Gender : </label><br>
<input type="radio" name="gender" value="Male" /> Male
<input type="radio" name="gender" value="Female" /> Female
<input type="radio" name="gender" value="Other" /> Other
<br><br>
<label>Select Country : </label><br>
<select id="country" name="country">
<option>India</option>
<option>USA</option>
<option>UK</option>
</select>
<br><br>
<label>Upload File : </label><br>
<input type="file" name="file" placeholder="Enter your file" />
<br><br>
<label>Message : </label><br>
<textarea id="message" name="message" rows="5" cols="100"></textarea>
<br><br>
<label><input type="checkbox" name="agree" /> I agree terms and conditions
: </label><br>
<br><br>
<label for="subscribe"><input type="checkbox" id="subscribe"
name="subscribe"> Subscribe to newsletter</label><br>
<br><br>
<input type="submit" name="submit" value="Submit Form"/>
<button type="reset" onclick="alert('Form is reset');">Reset</button>
</form>
</body>
</html>
<script>
function validateForm()
{
var username = document.getElementById("username").value;
if(username === ""){
alert("Please enter username.");
return false;
}else{
alert("Form submitted..");
return true;
}
</script>
