Html forms kya hai :
Jab Bhi app koi website dekte ho, ya koi bhi web page apne deka hoga vha ek
contact form bana hota hai, yha jab app koi form bharte ho apko apna username ,
password email etc yeh sab dena hota hai vo sab cheeza html forms hogi hai
Html form banane ke liya hum
hamesha <form> starting tag or </form> ka closing tag use
karte hai , Issi tag mein hum apne form banate hai
App dyan sa code ko deko humne forms tag ke ander label username liya hai or fir input type mein username ko text raka hai or jo name input mein hai ussme humne btaya hai ki username ke bare mein hum baat kar raha hai
I hope itna apko samaj a gaya hoga chalo abb password , gmail bhi isme add karte hai bhaut simple hai
<form> tag ke baad hum
labels ka use karte hai jiske liya hum label tag <label> use karte
hai, isme hum label likte hai jesa hume usename or password vala ek form
bana hai to hum labels tag mein likegga username yha password jo bhi hum
label dena chate ho.
Label ke baad input tag isme
hume btana hota hai ki jo label humne username liya hai vo kon sa format
mein hona chaye text, number, yha kuch bhi jesa hume pta hai username
hamesha text mein liya jata hai to hum simple username ko input tag mein
text mein lega
Example
:
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<h1>Contact Form</h1>
<label>Username :</label>
<input type="text"name ="username">
</form>
</body>
</html>
Output:
App dyan sa code ko deko humne forms tag ke ander label username liya hai or fir input type mein username ko text raka hai or jo name input mein hai ussme humne btaya hai ki username ke bare mein hum baat kar raha hai
I hope itna apko samaj a gaya hoga chalo abb password , gmail bhi isme add karte hai bhaut simple hai
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<h1>Contact Form</h1>
<label>Username :</label>
<input type="text"name ="username">
<br><br>
<label>Password :</label>
<input type="password"name ="password">
<br><br>
<label>Email Id :</label>
<input type="email"name ="email">
</form>
</body>
</html>
Output:
App samaj sakte hai mena
zyada kuch nahi kiya bass 2 or colum banaye or output mein dek sakte hai
humara contact form kesa show ho rha hai I hope apko itna samaj a gaya
hoga
Pratice bhi saath sath mein
karoge to app achsa sa samaj jaogee
Placeholder = "
" (attribute)
Yeh attribute kya
hai or iska kaam kya hai , Apne deka hoga jab hum contact form bharte hai hai
like username or uske samne jo box show hota hai usme bhi kabhi lika hua atta
hai enter your username, Hmmm necha example mein deko
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<h1>Contact Form</h1>
<label>Username :</label>
<input type="text"name ="username" placeholder="enter your name">
</form>
</body>
</html>
Output:
App dek sakte hai jo username
ke samne box banaya tha usme bhi kuch lika hua a rha hai yeh hota hai
placeholder attribute ki help sa
App same hum yeh bakiyo mein
bhi use karte hai password , email mein
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<h1>Contact Form</h1>
<label>Username :</label>
<input type="text"name ="username" placeholder="enter your name">
<br><br>
<label>Password :</label>
<input type="password"name ="password" placeholder="enter your password">
<br><br>
<label>Email Id :</label>
<input type="email"name ="email" placeholder="enter your email">
<br><br>
</form>
</body>
</html>
Output:
I hope app samaj gaye honge
ki placeholder attribute ka kya kaam hai or kesa work karta hai.
Radio Button :
Jab
hum forms banate hai to usme hum kabi gender bhi use karte hai , matlab select
your gender to chalo apko btata ho gender vala portion form mein kesa banate
hai.
Uske liya hume simple input
tag ko use karna hai
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<h4>Select Your Gender</h4>
<input type="radio" name="">Male
<input type="radio" name="">Female
<input type="radio" name="">Other
</form>
</body>
</html>
Output:
* Humne input tag use kiya
jisme humne uska type radio raka hai yeh important hai ,
Jab bhi apko gender form bana
hoga to yhe yaad rakna ki ki isme apkoo type radio use karna hai
* Uske baad name lika hai wait
mein apko ek baat bta do agar app name mein kuch nahi likoge to bhi iska
output acha sa show hoga jesa app upper output dek rha ho
* Lekin isme abbi bhi problem
yeh hai ki jab app gender mein option click kroga to app 3 option par
click hota reha matlab apko ek ko select krna chate ho to baki unselect ho
to uske liya name ki jagga apko gender likna hai sabme jesa type mein same
lika hai radio vesa he name mein gender
* Jissa yeh hoga ki app 3 mein
sa ek he select kroge or baki do select nahi honge.
* Yeh
work apke liya rakta ho mein appko mein code deta ho app khud check karke btana
kya difference hai iss code mein or upper vale code mein
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<h4>Select Your Gender</h4>
<input type="radio" name="Gender">Male
<input type="radio" name="Gender">Female
<input type="radio" name="Gender">Other
</form>
</body>
</html>
Checkbox
Kesa Banate hai Html forms mein :
Phela mein apko dika dekta
hai check box kya hota hai
Yeh hota hai
checkbox I hope apko samaj a gaya hoga checkbox kiss bolte hai
Isko banae ka code
bhi necha dek lo
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<p>Please read all instruction carefully</p>
<input type="checkbox"name="">Yes, I read it all
</form>
</body>
</html>
Checkbox ke liya apko simple
input tag lena hai jisme type attribute ki help sa app checkbox use kar
sakte ho
Submit Button in
Html
Submit button har ek jagga
apko submit button dekegga chaye apko login karna ho yha koi bhi form
submit karna ho apko submit button dekegga
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<p>Please read all instruction carefully</p>
<input type="checkbox"name="">Yes, I read it all
<br><br>
<input type="submit"name="submit" value="Submit">
</form>
</body>
</html>
Output:
App dek sakte hai humne input
tag mein type attribute liya jisme submit ka use kiya humne jo pre-defined
hai uske baad humne name mein submit fir sa use kiya and last mein value
mein app vo naam lika jo apko display par show karwana hai mena submit
again lika hai app kuch or bhi lik sakte ho
I hope apko samaj a
gaya hoga mena ajj apko form ke bare mein btaya ki kesa banate hai
Jitna bhi ajj humne
sara deka usko abb mein ek baat ek sath use karke dikata ho
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<h1>Contact Form</h1>
<label>UserName :</label>
<input type="text"name="UserName" placeholder="Enter your Name">
<br><br>
<label>Password :</label>
<input type="password"name="password" placeholder="Enter your password">
<br><br>
<label>Email Id :</label>
<input type="email"name="email" placeholder="Enter your email">
<br><br>
<p>Select Your gender</p>
<input type="radio"name="gender">Male
<input type="radio"name="gender">Female
<input type="radio"name="gender">Other
<p>Please read all instruction carefully</p>
<input type="checkbox"name="">Yes, I read it all
<br><br>
<input type="submit"name="submit" value="Submit">
</form>
</body>
</html>
Output:
I hope app acha sa
sab kuch samaj gaye hone
Note = Pratice karo
ek baar nahi baar baar karo jab tak apko khud yakeen na ho ki hai isme mein
mahir ho chuka ho.
Agar fir bhi apko
kuch doughts honge to coment karo mein response zurrur duga .