WHAT
IS FORM IN HTML....?
- If you want to take any information from the user, then you can use HTML forms. For example, whenever we buy a product, our details are taken first. This is how the HTML form works.
- There are some rules of HTML form which can be fallow and make html form. You will find HTML Forms in many forms in Websites. You can see these as
1.Sign Up Forms
2.Log in Forms
3.Payment Details
Forms
4.Survey Forms etc
Do you know that Google's Search Box is also
an HTML Form? In the forms, the necessary information is filled by the
users. And this information is sent to the server. From where webmasters can
access it.
HOW TO CREATE FORM IN HTML.......?
<html>
<head><title></title>
<body>
<form>
First name : <input type=”text” name=”Firstname”><BR><BR>
Last Name : <input type=”text” name=”Lastname”><BR><BR>
<input type="BUTTON" VALUE="SUBMIT">
</form>
</body>
</html>
OUTPUT:
2.Defining text & password Input control
<html>
<head><title>username and password</title></head>
<body>
<form>
username:
<br>
<input type="name" name="name">
<br> //for break line
password:
<br>
<input type="password" name="password">
</form>
</body>
</html>
3. text Area
<html>
<head><title>username and password</title></head>
<body>
<form>
message:<br>
<textarea rows='5" cols="3" name="message">write your messasge
</textarea>
</form>
</body>
</html>
output:
4. Checkbox
<html>
<head><title>username and password</title></head>
<body>
<form>choose your subject:<br>
<input type="checkbox" name="hindi">hindi<br>
<input type="checkbox" name="english">english<br>
<input type="checkbox" name="maths">maths
<input type="checkbox" name="science">science
<input type="checkbox" name="social science">social science
</form>
</body>
</html>
output:
5. Radio button
<html>
<head><title>username and password</title></head>
<body>
<form>choose your official language:<br>
<input type="radio" value="hindi" name="subject">hindi<br>
<input type="radio" value="english" name="subject">english<br>
<input type="radio" value="germany" name="subject">germany<br>
<input type="radio" value="urdu" name="subject">urdu<br>
<input type="radio" value="marathi" name="subject">marathi
</form>
</body>
</html>
output:
5. DROP DOWN LIST
<html>
<head><title></title>
<body>
<form>
<br>
select your state:
<br>
<select name="dropdown">
<option value="choose">*select*</option>
<option value="delhi">delhi</option>
<option value="delhi">rajasthan</option>
<option value="delhi">haryana</option>
<option value="delhi">maharastra</option>
<option value="delhi">madhya pradesh</option>
</select>
</form>
</body>
</html>
OUTPUT:
6. FILE UPLOAD BOX IN HTML
<html>
<head><title></title>
<body>
<form>
UPLOAD YOUR RESUME:<br>
<input type="file" name="resume">
</form>
</body>
</html>
Output:
7. CLICKABLE BUTTONS IN HTML
<html>
<head><title></title>
<body>
<form>
<input type="SUBMIT" name="SUBMIT" value="Submit"><br><br>
<input type="reset" name="reset" value="Reset"><br><br>
<input type="button" name="Send" value="send"><br><br>
<input type="image" name="imagebutton" src="image url">
</form>
</body>
</html>
Output:
8. Grouping Form Data
<html>
<head><title></title>
<body>
<form>
<fieldset>
<legend>personal information</legend>
First Name:
<input type="text" name="Fname">
<br><br>
Last name:
<input type="text" name="lastname">
</fieldset>
<fieldset>
<legend>log in detail</legend>
User ID:<br>
<input type="text" name="Fname">
<br><br>
Password:<br>
<input type="password" name="lastname">
</fieldset>
</form>
</body>
</html>
Output:
0 Comments