Scribd
Upload
21 views5 pages

WT Experiment 2

Uploaded by

dushyantgupta214
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
21 views5 pages

WT Experiment 2

Uploaded by

dushyantgupta214
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/ 5

EXPERIMENT 2

Objective: Write an HTML program to design an entry form of student details and send it
to store at database server like SQL, Oracle or MS Access.
Theory:
HTML Forms
HTML Forms are required to collect different kinds of user inputs, such as contact details like
name, email address, phone numbers, or details like credit card information, etc.
Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit
buttons, etc. Users generally complete a form by modifying its controls e.g. entering text,
selecting items, etc. and submitting this form to a web server for processing.
The <form> tag is used to create an HTML form. Here's a simple example of a login form:
Input Element
This is the most commonly used element within HTML forms.It allows you to specify various
types of user input fields, depending on the type attribute. An input element can be of type text
field, checkbox, password field, radio button, submit button, reset button, etc. and several new
input types
introduced in HTML5.
The most used input types are described below.
Text Fields Text fields are one line areas that allow the user to input text.Single-line text input
controls are created using an <input> element, whose type attribute has a value of text. Here's an
example of a single-line text input used to take username:
Password Field
Password fields are similar to text fields. The only difference is; characters in a password field
are masked i.e. shown as asterisks or dots. This is to prevent others from reading the password on
the screen. This is also a single-line text input controls created using an <input> element whose
type attribute has a value of password.
Here's an example of a single-line password input used to take user password:
Radio Buttons:
Radio buttons are used to let the user select exactly one option from a pre-defined set of options.
It is created using an <input> element whose type attribute has a value of radio.
Checkboxes
Checkboxes allows the user to select one or more option from a pre-defined set of options. It is
created using an <input> element whose type attribute has a value of checkbox.
File Select box
The file fields allow a user to browse for a local file and send it as an attachment to the form
data. It normally rendered as a text box with a button that enables the user to browse for a file.
However, the user can also type the path and name of the file in the text box.This is also created
using an <input> element, whose type attribute value is set to file.
Textarea
Textarea is a multiple-line text input control that allows a user to enter more than one line of text.
Multi-line text input controls are created using an <textarea> element.
Select Boxes
A select box is a drop down list of options that allows user to select one or more option from a
pull-down list of options. Select box is created using the <select> element and <option> element.
The option elements within the <select> element define each list item.
Submit and Reset Buttons
A submit button is used to send the form data to a web server. When submit button is clicked the
form data is sent to the file specified in the form's action attribute to process the submitted data.
A reset button resets all the forms control to default values.
Most frequently used form attributes are:

• Attribute
• Description
• Name
• action
• method
• target
The name of the form.
URL of the program that processes the information submitted via form.
The HTTP method that the browser uses to submit the form. Possible values are get and
post.
A name or keyword indicating the target page where the result of the script will be displayed
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Entry Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 50px auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group button {
width: 100%;
padding: 10px;
background: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
}
.form-group button:hover {
background: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<h2>Student Entry Form</h2>
<form id="studentForm" method="POST" action="process_form.php">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
</div>
<div class="form-group">
<label for="department">Department:</label>
<select id="department" name="department" required>
<option value="Computer Science">Computer Science</option>
<option value="Electrical Engineering">Electrical Engineering</option>
<option value="Mechanical Engineering">Mechanical Engineering</option>
<option value="Civil Engineering">Civil Engineering</option>
</select>
</div>
<div class="form-group">
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
Output:

You might also like