#HTML Forms
An HTML form is used to collect user input.
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
#HTML Form Elements:-
The HTML <form> Elements
The HTML <form> element can contain one or more of the following form elements:
<input><label><select><textarea><button><fieldset><legend><datalist><output><option><optgroup>
WAP:-
NO.1
<html>
<head>
<title>create a simple form</title>
</head>
<body>
<form>
Enter your name<input type="text">
<br>
Enter your Roll no.<input type="number">
<br>
Enter Your class<input type="text"><!---its depending you class enter text or number-->
<br>
Enter your father name<input type="text">
<br>
Enter your mother name<input type="text">
<br>
Enter your Password<input type="password">
<br>
Enter your email<iput type="email">
</form>
</body>
</html>
NO.2:-
WAP BUTTONS,LIKE SUBMIT ,LOGIN AND RESET?
<html>
<head>
<title>create a simple form</title>
</head>
<body>
<form>
Enter your name<input type="text">
<br>
Enter your Password<input type="password">
<br>
<input type="submit">
<input type="reset">
<input type="button" value="login">
</form>
</body>
</html>
NO.3:-
Name Attribute in HTML.....
<html>
<head>
<title>create a simple form with name attribute</title>
</head>
<body>
<form>
Enter your name<input type="text" name="uname">
<br>
Enter your Roll no.<input type="number" name="rollno">
<br>
Enter Your class<input type="text" name="class"><!---its depending you class enter text or number-->
<br>
Enter your father name<input type="text" name="fname">
<br>
Enter your mother name<input type="text" name="mname">
<br>
Enter your Password<input type="password" name="pass">
<br>
<input type="submit">
</form>
</body>
</html>
NO.4:-
Value attribute:-
<html>
<head>
<title>create a simple form with value attribute</title>
</head>
<body>
<form>
Enter your name<input type="text" value="uname">
<br>
Enter your Roll no.<input type="number" value="rollno">
<br>
Enter Your class<input type="text" value="class"><!---its depending you class enter text or number-->
<br>
Enter your father name<input type="text" value="fname">
<br>
Enter your mother name<input type="text" value="mname">
<br>
Enter your Password<input type="password" value="pass">
<br>
<input type="submit">
</form>
</body>
</html>
NO.5:-
CHECKBOX USED IN HTML:-
#Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
This is how the HTML code displayed in a browser:
bike
car
cycle
WAP:-
<html>
<head>
<title>checkbox</title>
</head>
<body>
<form>
Car<input type="checkbox" name="car" value="car">
Bike<input type="checkbox" name="bike" value="bike">
Truck<input type="checkbox" name="truck" value="truck">
<input type="submit" value="login">
</form>
</body>
</html>
NO.6
#Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices. How to display radio button is like:-
male
female
otherWAP:-
No.12:-
<html>
<head>
<title>Radio button</title>
</head>
<body>
<form>
Male:<input type="radio" name="gender">
Female<input type="radio" name="gender">
Other<input type="radio" name="gender" >
<input type="submit" value="login">
</form>
</body>
</html
Note:- Checked attribute is used to check field automatically.Like:-<input type="radio" name="gender" checked>
NO.7
#Label tag:-
- Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area).
<html>
<head>
<title>Radio button</title>
</head>
<body>
<form>
<label>Male:<input type="radio" name="status"></label>
<label>Female:<input type="radio" name="dtatus"></label>
</form>
</body>
</html>
no.8
#The Autocomplete Attribute
The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
<html>
<head>
<title> form</title>
</head>
<body>
<form autocomplete="on">
Enter your name<input type="text">
<br>
Enter your Roll no.<input type="number">
<br>
Enter Your class<input type="text" autocomplete="of"><!---its depending you class enter text or number-->
<br>
Enter your father name<input type="text">
<br>
Enter your mother name<input type="text">
<br>
Enter your Password<input type="password">
<br>
Enter your email<iput type="email">
<br>
<input type="submit">
</form>
</body>
</html>
no.9
#The Disabled and autofocus Attribute:-
The input autofocus attribute specifies that an input field should automatically get focus when the page loads.
<html>
<head>
<title> form</title>
</head>
<body>
<form>
Enter your name<input type="text" disabled>
<br>
Enter your Roll no.<input type="number">
<br>
Enter Your class<input type="text" ><!---its depending you class enter text or number-->
<br>
Enter your father name<input type="text" autofocus>
<br>
Enter your mother name<input type="text">
<br>
Enter your Password<input type="password">
<br>
Enter your email<iput type="email">
<br>
<input type="submit">
</form>
</body>
</html>
No.10:-
#The <textarea> Element:-
The <textarea> element defines a multi-line input field (a text area):
<html>
<head>
<title>textarea tag</title>
</head>
<body>
<textarea rows="10" cols="30">
you can anything write in this section
</textarea>
</body>
</html>
No.11
The feildset and legend Element
<html>
<head>
<title>feildset and legend</title>
</head>
<body>
<h1> The feildset and legend Element</h1>
<form>
<fieldset>
<legend> Personalia:</legend>
First name:<input type="text" name="fname"><br><br>
Last name:</label>
<input type="text" name="lname"><br><br>
<input type="email" name="email"><br><br>
Birthday:<input type="date" name="birthday"><br><br>
<input type="submit" value="submit">
</feildset>
</form>
</body>
</html>
#url and search box:-
<html>
<head>
<title>url</title>
</head>
<body>
<form>
Enter your Website Name<input type="url" name="url"><br><br>
Search box<input type="search" name="search"><br><br>
<input type="submit">
</form>
</body>
</html>
NO.13:-
#Input Type Number
- The
<input type="number">defines a numeric input field. - You can also set restrictions on what numbers are accepted.
- The following example displays a numeric input field, where you can enter a value from 1 to 5:
A.
<html>
<head>
<title>number field</title>
</head>
<body>
<form>
Enter Number<input type="number" name="num" min="1" max="5">
<input type="submit">
</form>
</html>
B.
<html>
<head>
<title>number field</title>
</head>
<body>
<form>
Enter Number<input type="number" name="num" min="1" max="5" step="2">
<input type="submit">
</form>
</html>
C.
<html>
<head>
<title>number field</title>
</head>
<body>
<form>
Enter Number<input type="number" name="num" min="1" max="5" value="10">
<input type="submit">
</form>
</html>
D.
<html>
<head>
<title>number field</title>
</head>
<body>
<form>
Enter Number<input type="number" name="num" min="1" max="5" value="10" readonly">
<input type="submit">
</form>
</html>
E.
<html>
<head>
<title>number field</title>
</head>
<body>
<form>
Enter Number<input type="number" name="num" min="1" max="5" required>
<input type="submit">
</form>
</html>
No.14:-
#Date Time Field:-
<html>
<head>
<title> </title>
</head>
<body>
<form>
Date <input type="date"><br>
Time <input type="time"><br>
Date And Time <input type="datetime-local">
</form>
</body>
</html>
No:-15.
#Month,Week,Color Field:-
<html>
<head>
<title> month,week, color</title>
</head>
<body>
<form>
Month: <input type="month" name="month"><br><br>
Week: <input type="week" name="week"><br><br>
color: <input type="color" name="color"><br>
</form>
</body>
<html>
No.16:-
#Placeholder attribute:-
<html>
<head>
<title></title>
</head>
<body>
<form>
first name: <input type="text" name="fname" placeholder="first name 1"><br>
last name: <input type="text" name="lname" placeholder="last name 2"><br>
email: <input type="email" name="email" placeholder="email 3"><br>
<input type="submit" value="login">
</form>
</body>
</html>
No:17.
#Choose your photo field:-
<html>
<head>
<title> program</title>
</head>
<body>
<form>
<input type="file" id="myself" name="myfile"><br><br>
<input type="submit">
</form>
</body>
</html>
NO.18.
#Create a button to onclick show message:-
<html>
<head>
<title>onclick button</title>
</head>
<body>
<form>
<button type="button" onclick="alert('Hello Wold!')"> Click me!</button>
</form>
</body>
</html>
NO.19
#Hidden field
<html>
<head>
<title>hidden data </title>
</head>
<body>
<form>
User Name : <input type="text" name="uname"><br><br>
<input type="hidden" name="count" value="India">
<input type="Submit">
</form>
</body>
</html>
No.20:-
#Create decorative html page
<html>
<head>
<title> decorative html page</title>
</head>
<body background="tulips.jpg">
<br><br><br><br><br><br><br><br><br>
<p align="center" >
<font color="green" size="85%">WELCOME TO HTML</font></p>
</body>
</html>
NO.21.
#Form Action attribute:-
<html>
<head>
<title>formaction</title>
</head>
<body>
<form>
Enter name:<input type="text" name="uname"><br><br>
Password:<input type="password" name="pass"><br><br>
Email:<input type="email" name="email"><br><br>
<input type="submit" value="submit" formaction="welcome.html">
</form>
</body>
</html>
NO.22
#IMAGE BUTTON
<html>
<head>
<title>image button</title>
</head>
<body>
<form>
<input type="image" src="submitbutton.jpg" alt="error"><br>
</form>
</body>
</html>
NO.23
#The List Attribute
<html>
<head>
<title>List Attributes</title>
</head>
<body>
<form>
<input list="browsers">
<datalist id="browsers">
<option value="internet explorer">
<option value="firefox">
<option value="chrome">
<option value="safari">
</datalist>
</form>
<body>
</html>
NO.24
#Get and Post method in HTML
1.used get method
<html>
<head>
<title>get and post method</title>
</head>
<body>
<form method="get">
Name:<input type="text" name="name"><br><br>
Password:<input type="password" name="pass"><br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
2.Used Post method:-
<html>
<head>
<title>get and post method</title>
</head>
<body>
<form method="post">
Name:<input type="text" name="name"><br><br>
Password:<input type="password" name="pass"><br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
NO.25
#Set validation text field:-
<html>
<head>
<title> text length</title>
</head>
<body>
<form>
Enter Your Name<input type="text" name="name" minlength="5" maxlength="5" placeholder="uname" size="40"><br><br>
<input type="submit">
</form>
</html>
NO.26
#HTML multiple Attribute
<html>
<head>
<title> Multiple attribute</title>
</head>
<body>
<form>
Select images: <input type="file" name="img" multiple><input type="submit">
</form>
</body>
</html>
NO.27
#Select tag:-
<html>
<head>
<title>select tag</title>
</head>
<body>
<form>
<select name="course">
<option value=" ">None</option>
<option value="java">Java</option>
<option value="c">C</option>
<option value="c++">C++</option>
</select><br>
<input type="submit">
</form>
</body>
</html>
NO.28
#Select tag with option tag and optgroup or disabled:-
<html>
<head>
<title>optgroup tag</title>
</head>
<body>
<form>
course:<select>
<optgroup label="Programing">
<option value="java>java programing</option>
<option value="c" selected> c programing</option>
<option value="c#"> c sharp</option>
<option value="c++" disabled> c++programing</option>
</optgroup>
<optgroup label="web desigining">
<option value="html"> html</option>
<option value="css"> css</option>
<option value="javascript">java script</option>
</optgroup>
</form>
</body>
</html>
NO.29
#Form Formatting :-
<html>
<head>
<title></title>
</head>
<body>
<form>
<table>
<tr>
<td>Enter your name</td><td><input type="text"></td>
</tr>
<tr>
<td>Enter your father name</td><td><input type="text"></td>
</tr>
<tr>
<td>Enter your mother name</td><td><input type="text"></td>
</tr>
<tr>
<td>Enter your class</td><td><input type="number"></td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment
THANK YOU