Create a webpage using Form elements
Laboratory Objective:
- To be able to design a form using form elements.
HTML Form
- HTML Form is a document which stores information entered by user on a web server using interactive controls.
- It contains different kind of information such as username, password, contact number, email id etc.
- HTML form uses elements like input box, radio buttons, check box, submit buttons etc.
- Using these elements the information of an user is submitted on a web server
- HTML Forms are required, when you want to collect some data from the site visitor.
- For example, during user registration you would like to collect information such as name, email address, credit card, etc.
- The HTML <form> tag is used to create an HTML form and it has following syntax
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
Example of HTML form
<html>
<body>
<form>
Username: <br>
<input type="text" name="username"><br>
Password: <br>
<input type="password" name="password"><br>
<input type="submit" value="Submit"><br>
</form>
</body>
</html>
HTML <form> Attributes
- action : Backend script ready to process your passed data.
- method : Method to be used to upload data. The most frequently used are GET and POST methods.
- target : Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
- enctype : You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server.
The <input> Element
- The <input> element is the most important form element.
- The <input> element can be displayed in several ways, depending on the type attribute.
- There are different types of form controls that you can use to collect data using HTML form −
- Text Input Controls
- Checkboxes Controls
- Radio Box Controls
- Select Box Controls
- File Select boxes
- Hidden Controls
- Clickable Buttons
- Submit and Reset Button
<input type=“text”> Defines a one-line text input field
<input type=“password”> Defines a one-line password input field
<input type=“radio”> Defines a radio button (for selecting one of many choices)
<input type=“checkbox”> Defines checkboxes which allow select multiple options form
<input type=“submit”> Defines a submit button (for submitting the form)
<input type=“reset”> Defines a reset button to reset all values in the form
<input type=“button”> Defines a simple push button, which can be programmed to perform a task on an event
<input type=“file”> Defines to select the file from device storage
<input type=“image”> Defines a graphical submit button
<input type=“date”> Defines an input field for selection of date
<input type=“datetime-local”> Defines an input field for entering a date without time zone
<input type=“email”> Defines an input field for entering an email address
<input type=“number”> Defines an input field to enter a number
<input type=“tel”> Defines an input field for entering the telephone number
Sample Program
Create a HTML web page for User Registration Form.
<html>
<head>
<style>
input[type="text"],
input[type="password"],
select {
border: 1px solid red;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
form {
background-color: #f1f1f1;
width: 40%;
padding: 20px;
}
input[type="submit"] {
border-radius: 5px;
padding: 5px;
margin: 5px;
background-color: green;
color: white;
font-size: 14;
}
input[type="reset"] {
border-radius: 5px;
padding: 5px;
margin: 5px;
background-color: red;
color: white;
font-size: 14;
}
</style>
<script>
function input(e) {
e.style.backgroundColor = "yellow";
}
function reset1(e) {
e.style.backgroundColor = "white";
}
function fullName() {
var f = document.getElementById("fname").value;
var m = document.getElementById("mname").value;
var l = document.getElementById("lname").value;
document.getElementById("sname").value = f + " " + m + " " + l;
}
</script>
</head>
<body>
<center>
<form>
<h1>Registration Form</h1>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="fname" placeholder="Enter first name" onclick="input(this)" onblur="reset1(this)" oninput="fullName()" /></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="mname" placeholder="Enter middle name" onclick="input(this)" onblur="reset1(this)" oninput="fullName()" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="lname" placeholder="Enter last name" onclick="input(this)" onblur="reset1(this)" oninput="fullName()" /></td>
</tr>
<tr>
<td>Full Name</td>
<td><input type="text" id="sname" /></td>
</tr>
<tr>
<td>Date of Birth</td>
<td>
<select name="date">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="year">
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
</select>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="Male">Male</input>
<input type="radio" name="gender" value="Female">Female</input>
</td>
</tr>
<tr>
<td>Contry</td>
<td>
<select name="contry">
<option selected>India</option>
<option>US</option>
<option>UK</option>
</select>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password1" />
</td>
</tr>
<tr>
<td>Comfirm Password</td>
<td>
<input type="password" name="password2" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
