Scribd
Upload
11 views6 pages

3.1 Form and Event Handling

Uploaded by

damdhadekailas35
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
11 views6 pages

3.1 Form and Event Handling

Uploaded by

damdhadekailas35
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

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