Form Attributes in HTML

codinger 20 Jun 2023 | 3:45 pm HTML

What is Form in HTML?

  • Form से हम User से Data एकत्रित (Collect) करते हैं।
  • Form से हम User से input एकत्रित (Collect) करते हैं।
  • Form Tag का Use हम Form का layout तैयार करने में करते हैं।

List of Form Elements-->

  • text input control- Input Box से हम यूजर से User का Name, Email, Mobile No. और Address आदि ले सकते हैं।
  • checkbox control- दो या दो से अधिक Value में से एक या एक से अधिक Value को Select करने के लिए check box का Use किया जाता है।
  • radio box control- दो या दो से अधिक Value में से कोई एक Value को Select करने के लिए radio box का Use किया जाता है।
  • select box control- दो या दो से अधिक Value में से कोई एक Value को Select करने के लिए select box का Use किया जाता है। इसमें Dropdown खुलता है।
  • file Select Box control- File Select Box से हम JPG, PNG, MP4 आदि Files को हम Select कर सकते हैं।
  • Hidden control- Clickable button checked- checked attribute से अपने आप checked रहता है। checked attribute, radio button or checkbox पर काम करता है।
  • disabled- इस फिल्ड में डाटा Disabled रहता है। और डाटा mysql में नहीं जाता है। अर्थात् डाटा सबमिट नहीं होता है। fieldset- Form के चारों तरफ एक चौकोर घेरा खिचने का काम करता है।
  • readonly- इस input में Data पढा जा सकता है। उसमें कोई बदलाव नहीं किया जा सकता। इसका डाटा mysql में जाता है। अर्थात् डाटा सबमिट होता है। Submit & Reset button
<html>

<head>
    <link rel="stylesheet" href="form.css">
	<title>Form Tag in HTML </title>
</head>

<body>

<form>
<fieldset>

<legend>Form</legend>

Website: <input type="text" name="name" placeholder="Website Name" value="Codinger.in" disabled=""/><br><br>
		  
NickName: <input type="text" name="name" placeholder="Enter Nick Name" autofocus required value="Samrat Suresh" readonly=""/><br><br>		  
		  
		  
Profile Picture: <input type="file"/><br><br>

Name: <input type="text" name="name" placeholder="Enter Your Name" autofocus required /><br><br>
<!---autofocus attribute- input box में Cursor का अपने आप Blinking करते हुए दिखाने के लिए autofocus का उपयोग किया जाता है। --->

<!--- placeholder - User को input box में पहले से कुछ लिखा हुआ दिखाने के लिए placeholder का Use किया जाता है। --->

eMail: <input type="email" name="email" placeholder="Enter Email Id" /><br><br>

Mobile No: <input type="number" name="mobilenumber" placeholder="Enter 10 Digit Mob No..." /><br><br>

Aadhar No.: <input type="number" placeholder="Enter Aadhar No..." maxlength="12" required="" /><br><br>

Select Color: <input type="color" value="#F50505"/><br><br>

Gender: <input type="radio" name="gender" value="m" checked=""/>Male
        <input type="radio" name="gender" value="f" />Female<br><br>
	<!---	Radio Button में से कोई एक Select करवाना है तो उनके name समान होने चाहिए।  --->
	
	Time: <input type="time"/><br><br>
	
	
	Date: <input type="date"/><br><br>
	
	Weeks: <input type="week"/><br><br>
	
	Month: <input type="month"/><br><br>
	
	Date Time: <input type="datetime-local"/><br><br>
	
	Range: <input type="range"/><br><br>
	
	
	Hobbies: <input type="checkbox"/>Cricket
	         <input type="checkbox"/>Kho Kho<br><br>
	Country: <select>
	                <option>Select Country</option>
	       <optgroup label="Asia">
	                <option>India</option>
					<option>USA</option>
	         </optgroup>
			 </select><br><br>
	
	State: <select>
	<option value="r">Select State</option>
	<option value="r">Rajasthan</option>
	<option value="h">Haryana</option>
	<option value="p">Punjab</option>
	</select><br><br>
	
	
	Password: <input type="password" placeholder="Enter Password"/><br><br>
	
	
	Secert: <input type="hidden" name="secert"/><br><br>
	
		
		Address: <textarea></textarea>
		<!--- textarea एक paid Tag है। --->
		
		
<input type="submit" name="submit" value="Submit" />
<input type="reset" />
<!--- reset atribute- अगर हमारे भरे हुए फॉर्म में एक से अधिक गलतियां हो गई है तो पूरे फॉर्म के Data को साफ (Clear) करने के लिए reset का Use किया जाता है.--->

</fieldset>
</form>



</body>

</html>

 

HTML Form Attributes Priview-

Form Website:

NickName:

Profile Picture:

Name:

eMail:

Mobile No:

Aadhar No.:

Select Color:

Gender: Male Female

Time:

Date:

Weeks:

Month:

Date Time:

Range:

Hobbies: Cricket Kho Kho

Country:

State:

Password:

Secert:

Address:

Share

Related Posts

Java Script Introducation

HTML Introducation

CSS Introducation

PHP Introducation

Introduction to SQL

HTML Basic

CSS Syntax

HTML elements


Comments:-


Please login to comment..