[Hindi] how to Create Registration form in html and css in hindi

how to Create Registration form in html and css in hindi

आज हम आपको html & css का इस्तेमाल करके Registration फॉर्म बनाना सिखायेगे वो भी हिंदी भाषा मैं तो बने रहिये हमारे साथ Let's Start.

how to create registration form use html and css hindihelperanil

Step 1 : Choose a HTML Editor

फॉर्म बनाने के लिए आपको एक html editor की जरुरत पड़ेगी मैं आपको कुछ html editor के नाम बता रहा हु। यह Free मैं डाउनलोड हो जाते है और इनको इस्तेमाल करना भी आसान है।

codepen
notepad ++
Sublime Text
NetBeans
Phase 6 HTML Editor

आप नॉर्मल Notepad का इस्तेमाल भी कर सकते हैं। बस फाइल सेव करते समय आपको . html लिख कर सेव करनी होगी।

Step 2 : Create a New File with .HTML Extension

अब आपको एक नई फाइल बनानी है . html लिख कर यह बहुत आसान है

Example :- [Form.html]

Step 3 : Type <html> into the editor

आप जब html editor मैं <html> लिखोगे तो यह आपने आप ही <html> के जो मैन कोड होते है उन्हें generate कर लेगा और कुछ इस तरह एक कोड दिखेंगे।

Ex.


<!DOCTYPE html>
<html>
<head>
<title> Title Here </title>
<body>
</body>
</head>
</html>

यह भी पढ़े - Html क्या है ? इसका मतलब क्या होता है।

अगर आपको पता नहीं हैं html के बारे मैं तो आप ऊपर वाले लेख को पढ़े इससे आपको यह फॉर्म बनाने और समझने मैं आसानी होगी।

Step 4: Fill in the fields and create the form

अब आपको जीचे जिस तरह मैंने लिखा हैं आपको भी वैसा ही लिखना है और एक बात का ध्यान रहे <body> मैंने ही लिखने है सारे कोड।

कुछ इस तरह लिखे।


<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h3>
REGISTRATION FORM</h3>
<table align="center" cellpadding = "10"><!----- First Name ---------------------------------------------------------->
<tr> <td>FIRST NAME</td> <td><input type="text" name="First_Name" maxlength="30"/><br />
<br />
</td> </tr>
<!----- Last Name ---------------------------------------------------------->
<tr> <td>LAST NAME</td> <td><input type="text" name="Last_Name" maxlength="30"/><br />
<br />
</td> </tr>
<!----- Date Of Birth -------------------------------------------------------->
<tr> <td>DATE OF BIRTH</td>   <td><br />
<select name="Birthday_day" id="Birthday_Day"><br />
<option value="-1">Day:</option><br />
<option value="1">1</option><br />
<option value="2">2</option><br />
<option value="3">3</option><br />
<br />
<option value="4">4</option><br />
<option value="5">5</option><br />
<option value="6">6</option><br />
<option value="7">7</option><br />
<option value="8">8</option><br />
<option value="9">9</option><br />
<option value="10">10</option><br />
<option value="11">11</option><br />
<option value="12">12</option><br />
<br />
<option value="13">13</option><br />
<option value="14">14</option><br />
<option value="15">15</option><br />
<option value="16">16</option><br />
<option value="17">17</option><br />
<option value="18">18</option><br />
<option value="19">19</option><br />
<option value="20">20</option><br />
<option value="21">21</option><br />
<br />
<option value="22">22</option><br />
<option value="23">23</option><br />
<option value="24">24</option><br />
<option value="25">25</option><br />
<option value="26">26</option><br />
<option value="27">27</option><br />
<option value="28">28</option><br />
<option value="29">29</option><br />
<option value="30">30</option><br />
<br />
<option value="31">31</option><br />
</select><br />
<br />
<select id="Birthday_Month" name="Birthday_Month"><br />
<option value="-1">Month:</option><br />
<option value="January">Jan</option><br />
<option value="February">Feb</option><br />
<option value="March">Mar</option><br />
<option value="April">Apr</option><br />
<option value="May">May</option><br />
<option value="June">Jun</option><br />
<option value="July">Jul</option><br />
<option value="August">Aug</option><br />
<option value="September">Sep</option><br />
<option value="October">Oct</option><br />
<option value="November">Nov</option><br />
<option value="December">Dec</option><br />
</select><br />
<br />
<select name="Birthday_Year" id="Birthday_Year"><br />
<br />
<option value="-1">Year:</option><br />
<option value="2012">2012</option><br />
<option value="2011">2011</option><br />
<option value="2010">2010</option><br />
<option value="2009">2009</option><br />
<option value="2008">2008</option><br />
<option value="2007">2007</option><br />
<option value="2006">2006</option><br />
<option value="2005">2005</option><br />
<option value="2004">2004</option><br />
<option value="2003">2003</option><br />
<option value="2002">2002</option><br />
<option value="2001">2001</option><br />
<option value="2000">2000</option><br />
<br />
<option value="1999">1999</option><br />
<option value="1998">1998</option><br />
<option value="1997">1997</option><br />
<option value="1996">1996</option><br />
<option value="1995">1995</option><br />
<option value="1994">1994</option><br />
<option value="1993">1993</option><br />
<option value="1992">1992</option><br />
<option value="1991">1991</option><br />
<option value="1990">1990</option><br />
<br />
<option value="1989">1989</option><br />
<option value="1988">1988</option><br />
<option value="1987">1987</option><br />
<option value="1986">1986</option><br />
<option value="1985">1985</option><br />
<option value="1984">1984</option><br />
<option value="1983">1983</option><br />
<option value="1982">1982</option><br />
<option value="1981">1981</option><br />
<option value="1980">1980</option><br />
</select><br />
</td> </tr>
<!----- Email Id ---------------------------------------------------------->
<tr> <td>EMAIL ID</td> <td><input type="text" name="Email_Id" maxlength="100" /></td> </tr>
<!----- Mobile Number ---------------------------------------------------------->
<tr> <td>MOBILE NUMBER</td> <td><br />
<input type="text" name="Mobile_Number" maxlength="10" /><br />
(10 digit number)<br />
</td> </tr>
<!----- Gender ----------------------------------------------------------->
<tr> <td>GENDER</td> <td><br />
Male <input type="radio" name="Gender" value="Male" /><br />
Female <input type="radio" name="Gender" value="Female" /><br />
</td> </tr>
<!----- Address ---------------------------------------------------------->
<tr> <td>ADDRESS <br />
<br />
<br />
</td> <td><textarea name="Address" rows="4" cols="30"><br />
</div>
<!------PASSWORD---------------------------------------------------------->  <br />
PASSWORD <br />
<br />
<br />
<input type="Password" /> <br />
<br />
<br />
<!----- Submit and Reset ------------------------------------------------->  <br />
<input type="submit" value="Submit" /><br />
<input type="reset" value="Reset" /><br />

अब आपका फॉर्म कुछ इस तरह का बन चूका है निचे उसका आउटपुट दिया हुआ है।

Registration Form

REGISTRATION FORM

FIRST NAME
LAST NAME
DATE OF BIRTH
EMAIL ID
MOBILE NUMBER	(10 digit number)
GENDER	Male Female
ADDRESS
PASSWORD

Step 5 : Apply CSS In HMTL Form

अब हमारा html फॉर्म बिलकुल तैयार है। लेकिन यह सिंपल फॉर्म है चलिए अब हम इसमें css की मदद से इसे और सुन्दर बना देते हैं।

अब मैं आपको css का coding दिखा देता हूँ।


<style>
h3{
  font-family: Calibri; 
  font-size: 25pt;         
  font-style: normal; 
  font-weight: bold; 
  color:maroon;
  text-align: center; 
  text-decoration: underline
}

table{
  font-family: Calibri; 
  color:white; 
  font-size: 11pt; 
  font-style: normal;
  font-weight: bold;
  text-align:; 
  background-color: purple; 
  border-collapse: collapse; 
  border: 2px solid navy
}
table.inner{
  border: 0px
}
</style>

Step 4: Fill in the fields and create the form

कुछ इस तरह लिखे।


<!DOCTYPE html>
<html>
<head>
<style>
h3{
  font-family: Calibri; 
  font-size: 25pt;         
  font-style: normal; 
  font-weight: bold; 
  color:maroon;
  text-align: center; 
  text-decoration: underline
}

table{
  font-family: Calibri; 
  color:white; 
  font-size: 11pt; 
  font-style: normal;
  font-weight: bold;
  text-align:; 
  background-color: purple; 
  border-collapse: collapse; 
  border: 2px solid navy
}
table.inner{
  border: 0px
}
</style>
<title>Registration Form</title>
</head>
<body>
<h3>
REGISTRATION FORM</h3>
<table align="center" cellpadding = "10"><!----- First Name ---------------------------------------------------------->
<tr> <td>FIRST NAME</td> <td><input type="text" name="First_Name" maxlength="30"/><br />
<br />
</td> </tr>
<!----- Last Name ---------------------------------------------------------->
<tr> <td>LAST NAME</td> <td><input type="text" name="Last_Name" maxlength="30"/><br />
<br />
</td> </tr>
<!----- Date Of Birth -------------------------------------------------------->
<tr> <td>DATE OF BIRTH</td>   <td><br />
<select name="Birthday_day" id="Birthday_Day"><br />
<option value="-1">Day:</option><br />
<option value="1">1</option><br />
<option value="2">2</option><br />
<option value="3">3</option><br />
<br />
<option value="4">4</option><br />
<option value="5">5</option><br />
<option value="6">6</option><br />
<option value="7">7</option><br />
<option value="8">8</option><br />
<option value="9">9</option><br />
<option value="10">10</option><br />
<option value="11">11</option><br />
<option value="12">12</option><br />
<br />
<option value="13">13</option><br />
<option value="14">14</option><br />
<option value="15">15</option><br />
<option value="16">16</option><br />
<option value="17">17</option><br />
<option value="18">18</option><br />
<option value="19">19</option><br />
<option value="20">20</option><br />
<option value="21">21</option><br />
<br />
<option value="22">22</option><br />
<option value="23">23</option><br />
<option value="24">24</option><br />
<option value="25">25</option><br />
<option value="26">26</option><br />
<option value="27">27</option><br />
<option value="28">28</option><br />
<option value="29">29</option><br />
<option value="30">30</option><br />
<br />
<option value="31">31</option><br />
</select><br />
<br />
<select id="Birthday_Month" name="Birthday_Month"><br />
<option value="-1">Month:</option><br />
<option value="January">Jan</option><br />
<option value="February">Feb</option><br />
<option value="March">Mar</option><br />
<option value="April">Apr</option><br />
<option value="May">May</option><br />
<option value="June">Jun</option><br />
<option value="July">Jul</option><br />
<option value="August">Aug</option><br />
<option value="September">Sep</option><br />
<option value="October">Oct</option><br />
<option value="November">Nov</option><br />
<option value="December">Dec</option><br />
</select><br />
<br />
<select name="Birthday_Year" id="Birthday_Year"><br />
<br />
<option value="-1">Year:</option><br />
<option value="2012">2012</option><br />
<option value="2011">2011</option><br />
<option value="2010">2010</option><br />
<option value="2009">2009</option><br />
<option value="2008">2008</option><br />
<option value="2007">2007</option><br />
<option value="2006">2006</option><br />
<option value="2005">2005</option><br />
<option value="2004">2004</option><br />
<option value="2003">2003</option><br />
<option value="2002">2002</option><br />
<option value="2001">2001</option><br />
<option value="2000">2000</option><br />
<br />
<option value="1999">1999</option><br />
<option value="1998">1998</option><br />
<option value="1997">1997</option><br />
<option value="1996">1996</option><br />
<option value="1995">1995</option><br />
<option value="1994">1994</option><br />
<option value="1993">1993</option><br />
<option value="1992">1992</option><br />
<option value="1991">1991</option><br />
<option value="1990">1990</option><br />
<br />
<option value="1989">1989</option><br />
<option value="1988">1988</option><br />
<option value="1987">1987</option><br />
<option value="1986">1986</option><br />
<option value="1985">1985</option><br />
<option value="1984">1984</option><br />
<option value="1983">1983</option><br />
<option value="1982">1982</option><br />
<option value="1981">1981</option><br />
<option value="1980">1980</option><br />
</select><br />
</td> </tr>
<!----- Email Id ---------------------------------------------------------->
<tr> <td>EMAIL ID</td> <td><input type="text" name="Email_Id" maxlength="100" /></td> </tr>
<!----- Mobile Number ---------------------------------------------------------->
<tr> <td>MOBILE NUMBER</td> <td><br />
<input type="text" name="Mobile_Number" maxlength="10" /><br />
(10 digit number)<br />
</td> </tr>
<!----- Gender ----------------------------------------------------------->
<tr> <td>GENDER</td> <td><br />
Male <input type="radio" name="Gender" value="Male" /><br />
Female <input type="radio" name="Gender" value="Female" /><br />
</td> </tr>
<!----- Address ---------------------------------------------------------->
<tr> <td>ADDRESS <br />
<br />
<br />
</td> <td><textarea name="Address" rows="4" cols="30"><br />
</div>
<!------PASSWORD---------------------------------------------------------->  <br />
PASSWORD <br />
<br />
<br />
<input type="Password" /> <br />
<br />
<br />
<!----- Submit and Reset ------------------------------------------------->  <br />
<input type="submit" value="Submit" /><br />
<input type="reset" value="Reset" /><br />
</td> </tr>
</table>
</form>
</body>
</html>

Css coding add करने के बाद आपका फॉर्म कुछ इस तरह का दिखने लगेगा।

Registration Form

REGISTRATION FORM

FIRST NAME
LAST NAME
DATE OF BIRTH
EMAIL ID
MOBILE NUMBER	(10 digit number)
GENDER	Male Female
ADDRESS
PASSWORD

अगर आपको Practice के लिए यह coding चाहिए तो आप download कर सकते है।

उम्मीद करता हु। आपको इस लेख से कुछ सिखने को मिला होगा। अगर किसी और टॉपिक पर लेख चाहिए तो कमेंट करे। और यह लेख कैसा लगा वो भी कमेंट मैं बताये।

Please shere with you friends, Thankyou

[Hindi] how to Create Registration form in html and css in hindi

how to Create Registration form in html and css in hindi

Step 1 : Choose a HTML Editor

Step 2 : Create a New File with .HTML Extension

Step 3 : Type <html> into the editor

Step 4: Fill in the fields and create the form

REGISTRATION FORM

Step 5 : Apply CSS In HMTL Form

Step 4: Fill in the fields and create the form

REGISTRATION FORM

Post a Comment

0 Comments

Category

Search This Blog

Facebook, Twitter, WhatsApp ke liye best photo editing kese hoti hai || photo ka background keise badle ||Hindi

इस तरीके से आप Facebook पर अनलिमिटेड Like and comment ला सकते हैं || how can we get unlimited likes and comment complete information in Hindi || HINDI hELPER ANIL

To kya aap bhi Apni Website banana chahte ho? Blog Kya hai is par site keise banaye Purijankari Hindi Main. || New Technical ||

[Hindi] how to success in life and career ।। असल जिंदगी मैं सफलता कैसे मिलेगी ।। Hindi Helper Anil

Pages

About Blog

Random Posts

Join our team

Tags

Popular Posts

Facebook, Twitter, WhatsApp ke liye best photo editing kese hoti hai || photo ka background keise badle ||Hindi

इस तरीके से आप Facebook पर अनलिमिटेड Like and comment ला सकते हैं || how can we get unlimited likes and comment complete information in Hindi || HINDI hELPER ANIL

To kya aap bhi Apni Website banana chahte ho? Blog Kya hai is par site keise banaye Purijankari Hindi Main. || New Technical ||

Menu Footer Widget

[Hindi] how to Create Registration form in html and css in hindi

how to Create Registration form in html and css in hindi

Step 1 : Choose a HTML Editor

Step 2 : Create a New File with .HTML Extension

Step 3 : Type <html> into the editor

Step 4: Fill in the fields and create the form

REGISTRATION FORM

Step 5 : Apply CSS In HMTL Form

Step 4: Fill in the fields and create the form

REGISTRATION FORM

You may like these posts

Post a Comment

0 Comments

Category

Search This Blog

Social Plugin

Facebook, Twitter, WhatsApp ke liye best photo editing kese hoti hai || photo ka background keise badle ||Hindi

इस तरीके से आप Facebook पर अनलिमिटेड Like and comment ला सकते हैं || how can we get unlimited likes and comment complete information in Hindi || HINDI hELPER ANIL

To kya aap bhi Apni Website banana chahte ho? Blog Kya hai is par site keise banaye Purijankari Hindi Main. || New Technical ||

[Hindi] how to success in life and career ।। असल जिंदगी मैं सफलता कैसे मिलेगी ।। Hindi Helper Anil

Pages

About Blog

Random Posts

Join our team

Tags

Popular Posts

Facebook, Twitter, WhatsApp ke liye best photo editing kese hoti hai || photo ka background keise badle ||Hindi

इस तरीके से आप Facebook पर अनलिमिटेड Like and comment ला सकते हैं || how can we get unlimited likes and comment complete information in Hindi || HINDI hELPER ANIL

To kya aap bhi Apni Website banana chahte ho? Blog Kya hai is par site keise banaye Purijankari Hindi Main. || New Technical ||

Menu Footer Widget