Form in HTML
They are used to access input values from the user and send those values to the server side. It is created using a <form></form> tag.
This tag consists of mainly 2 attributes -
Method - This attribute is used to determine how the values are sent to the server. It can have 2 values -
GET
POST
Action - This attribute determines which code on the server side will handle the request.
<form action="" method="get">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="n1" placeholder="Type your name"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="n2"></td>
</tr>
<tr>
<td>Address</td>
<td><textarea name="n3" id="" cols="8" rows="3"></textarea></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="n4" value="male">Male</td>
<td><input type="radio" name="n4" value="female">Female</td>
</tr>
<tr>
<td>Security Question</td>
<td><select name="n5" id="">
<option value="null">Select</option>
<option value="pet-name">Pet Name</option>
<option value="birthday">birthday</option>
</select></td>
</tr>
<tr>
<td><input type="text" name="n6">Enter your answer</td>
</tr>
<tr>
<td>Hobbies</td>
<td><input type="checkbox" name="n7">Hooping</td>
<td><input type="checkbox" name="n7">Books</td>
</tr>
<tr>
<td><button type="submit">Click</button></td>
<td><button type="reset">Refresh</button></td>
</tr>
</table>
</form>
For textbox, we always use an input tag, a non-container tag/non-closing tag.
If the value of the type attribute is password, then the content of the text box will not be shown to the user.
For multi-line input, the textarea tag is used, which has attributes rows and cols; rows denote the height of the textarea and cols denote the width.
The radio button has a type of radio and is used to accept a single value from the user. To group radio buttons together, we have to provide the same name for all the radio buttons.
To make use of the dropdown, we use the select tag. The sub-tag of select is option where we create the selectable options.
For multiple checkbox type input, we set the type to checkbox.
A submit button is necessary in a form, to send the request to the server, with the type - submit.
To reset all the fields, we need a reset button, with type - reset.
JAVASCRIPT
JavaScript is used for client-side validation of data. A JS code is usually written inside a script tag. The script tag is usually placed inside the head tag of the HTML.
Javascript code for validating empty fields.
<body>
<form method="post" onreset="resetting()" action="" name="myForm" onsubmit="return validateForm()">
First name - <input type="text" name="fname1">
Password - <input type="password" name="fname2">
Email - <input type="email" name="fname3">
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
validateForm(){
var x = document.forms['myForm']['fname1'].value;
var y = document.forms['myForm']['fname2'].value;
var z = document.forms['myForm']['fname3'].value;
if((x==null || x='')&&(y==null || y='')&&(z==null || z='')){
alert('All fields are blank')
document.forms['myForm']['fname1'].focus();
return false;
}
if(x=null||x==''){
alert('First name missing');
document.forms['myForm']['fname1'].focus();
return false;
}
if(y=null||y==''){
alert('Password must be filled out');
document.forms['myForm']['fname2'].focus();
return false;
}
if(z=null||z==''){
alert('Email must be filled out');
document.forms['myForm']['fname3'].focus();
return false;
}
}
In JavaScript, when we click on the submit button, then the onsubmit attribute of the form tag is called. Inside on submit attribute, we have to provide the name of the function, which will be called, when we click on the submit button.
Alert in javascript is a method that is used to generate the alert box on the screen, with a message.
The focus method is used to move the method to a particular textbox.
Return false means the request will not be sent to the server.
Javascript Code for number checking.
function check(){
var y = document.forms['myForm']['fname2'].value;
if(isNaN(y)==true)
{
alert('Please enter a valid age");
document.forms['myForm']['fname2'].va;ue='';
document.forms['myForm']['fname2'].focus();
return false;
}
}
<form name='myForm' action='' onsubmit='return check()' method='post'>
Age:<input type='text' name='fname2'>
<input type='submit' value='Submit'>
<input type='reset' value='Reset'>
</form>
isNaN stands for is Not A Number. If a particular value is not a number then this function returns true otherwise false.
Code for email verification in javascript
<html>
<head>
<title>Checking for numbers</title>
<script>
function validateEmail(){
var x=document.forms["myForm"]["fname"].value;
var mailformat=/^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/;
if(x.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
document.forms["myForm"]["fname"].value="";
document.forms["myForm"]["fname"].focus();
return false;
}
}
</script>
</head>
<body bgcolor="cyan">
<font size="30" name="Arial">
<form name="myForm" action="" onsubmit="return validateEmail()"
onreset="resetting()" method="post">
Email-id: <input type="text" name="fname" style="height:50;width:200;font-size:24">
<input type="submit" value="Submit" style="height:50;width:100;font-size:24">
<input type="reset" value="Reset" style="height:50;width:100;font-size:24">
</font>
</body>
</html>
/.../ denotes/encloses the entire statement/string
^ denotes the starting symbol
\ represents followed by
w denotes any alphanumeric word
. This special character may be there in the email
- represents hyphen or underscore
+ represents an alphanumeric word that may occur multiple times
? represents a special character occurring multiple times
\ represents an alphanumeric word and special characters may occur multiple times*
@ This special character may be there in the email
w{2,3} represents an alphanumeric word with 2 to 3 characters
$ represents the ending word of the email
In javascript, to compare 2 strings, we use the match method
Javascript code to display password length
<html>
<head>
<title>Password Validation</title>
<script>
function checkPassword() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
var isValid = password.length >= 6 && password === confirmPassword ? true : false;
if (!isValid) {
var message = password.length < 6 ? "Password should be at least " + 6 + " characters long." : "Passwords do not match.";
alert(message);
}
return isValid;
}
</script>
</head>
<body>
<form onsubmit="return checkPassword()">
<label for="password">Enter Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<label for="confirmPassword">Confirm Password:</label><br>
<input type="password" id="confirmPassword" name="confirmPassword"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In JavaScript, using the length attribute, we can check the length of a particular word or string entered in a textbox.
JDBC - Java Database Connectivity
It is an API using which we can connect our Java application to a particular database.
Database - It is defined as a file that consists of a collection of interrelated data.
DBMS stands for DataBase Management System. It is a software using which, we can manipulate the data stored in a database.
Example - Oracle, MySQL
RDBMS - Relational DataBase Management System.
In RDBMS relational means table. Here all the data are stored in tabular format.
In RDBMS, the rows in a table are called tuples. All the values stored in a single tuple are called a record. In a table, the individual columns are called keys or fields.
The column that contains unique elements is called a primary key. A primary key column can never have a null value, whereas, in a unique key column, we can keep null values.
Foreign key - if a primary key column of one table is present in another table, then in that second table, that column becomes a foreign key.
Steps to perform JDBC
create a database that contains a table with blank fields.
add appropriate Type 4 driver
write appropriate SQL query to interact with the database