Scribd
Upload
6 views

3.1 Form and Event Handling

Uploaded by

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

3.1 Form and Event Handling

Uploaded by

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

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>

You might also like