Introduction to HTML Forms
HTML forms are essential to website design, allowing users to input and submit data to a server. A form comprises various elements such as text fields, checkboxes, radio buttons, dropdown menus, and submit buttons. HTML forms provide a platform for collecting user information, such as contact information, feedback, and survey responses. Understanding how to create and use HTML forms is vital for web developers and designers.
An HTML form is a section of a web document into which the user can enter information. The information is passed back to a web server, which might be recorded in a database for future use or used to control what information is returned to the user.
Creating an HTML Form
To create an HTML form, a developer needs to use the element. The form element allows a developer to specify the data submission method, such as using the GET or POST method. Additionally, the form element allows a developer to specify the action after submitting the data.
<form action=”submit-form.php” method=”POST”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
<label for=”message”>Message:</label>
<textarea id=”message” name=”message”></textarea>
<input type=”submit” value=”Submit”>
</form>
In this example, we have created a simple form that allows users to submit their name, email, and message. The form action is set to “submit-form.php,” and the method is set to “POST.” The element is used to provide a label for each form element, and the element is used to create text fields for the name and email input. The element creates a message input field, and the <input type=”submit”> element is used to create a submit button.</p>
HTML Form Elements
HTML forms comprise several elements that allow users to input and submit data. These elements include text fields, checkboxes, radio buttons, dropdown menus, and submit buttons. Text fields allow users to input text data, while checkboxes and radio buttons allow users to select from predefined options. Dropdown menus enable users to choose from a list of predefined options. Submit buttons would allow users to submit their data to a server.
Form Validation
Form validation is a critical aspect of HTML form design, ensuring that user data is accurate and complete. Developers can validate user input using various validation techniques, including server and client. Server-side validation involves validating user input on the server, while client-side validation validates information on the client side using JavaScript.
<script>
function validateForm() {
let name = document.getElementById(“name”).value;
let email = document.getElementById(“email”).value;
let message = document.getElementById(“message”).value;
let emailPattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if (name === “”) {
alert(“Please enter your name.”);
return false;
} else if (email === “” || !emailPattern.test(email)) {
alert(“Please enter a valid email address.”);
return false;
} else if (message === “”) {
alert(“Please enter a message.”);
return false;
} else {
return true;
}
}
</script>
<form action=”submit-form.php” method=”POST” onsubmit=”return validateForm()”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
<label for=”message”>Message:</label>
<textarea id=”message” name=”message”></textarea>
<input type=”submit” value=”Submit”>
</form>
In this example, we have added a JavaScript function called “validateForm()” that checks the input data for the name, email, and message fields. We have also added a regular expression pattern to validate the email format. If any fields are empty or invalid, the function displays an alert message, and the form will not be submitted. Otherwise, the function returns true, and the form will be submitted.
Explain < Frame> and <Frameset> tags.
Ans:- <FRAMESET>TAG
This tag is included after the <HEAD> tag, establishing frames within the HTML document. It does all the dividing. It requires a closing tag, and there may be any number of <FRAMESET> tags within the HTML document.
Syntax:
<FRAMESET COLS = “Width1, Width2,……” Rows = “height1, height2,…….”>
The frame or Frameset definitions
</FRAMESET>
Cols: This attribute is used for vertical frames, and widths are specified as a comma-delimited
list sizes in pixels, percentages, or as a proportion of the remaining space by using “*.”
Rows: This attribute is used for horizontal frames, and height again is specified in pixels,
percentage, or as a proportion of the remaining space by using “*”.
<FRAME> TAG
This tag contains the frame content and works like the <LI> tag for lists. It tells the browser what to put in each Frame. Each Frameset must include a <FRAME> definition for each division. It does not have a closing tag.
Syntax:
<FRAME SRC = “URL”>
SRC: This attribute accepts the URL of the frame content.
