कैसे  HTML मै रजिस्ट्रेशन फॉर्म बनाये

0
21
html-form
html registration form HTML form ka use user se input lene ke liye kiya jaata hai aap apni daily life mai kisi bhi online vacancy ka online form fill karte ho wo sabhi online form ko HTML ki help  ki help se banaya jaata hai ab aap soch rahe honge ki ye form kaise aapke form ko database mai store karta hai ham aapko form se related sabhi jaanki dene wale hai is article mai bane rahiye hamare is article ke sath aap job form website jaise form ko easily design kar sakte hai.

HTML FORM KE TYPES:

1. Vertical Form:
  • vertical form mostly user login or user registration form se input lene ke liye use kiya jaata hai.
  • vertical HTMl form mai ek single coloumn mai sabhi elements ko arrange kiya jaata hai
Aapko new File Banana Hai form.html name se
neeche diya gaya html code ko paste kare form.html file mai uske baat us file ko apne browser mai run kare html registration form
<!DOCTYPE html>
<html>
    <head>
        <title>Register</title>
    </head>
    <style>
      .container {
          width: 400px;
          height: 300px;
      }
      form{
          border: 2px solid red;
          width:300px;
          padding: 10px;
      }
    </style>
    <body>
        <h2>Register User</h2>
        <form>
        <table width=”500″ cellspacing=”5″ cellpadding=”5″>
            <tr>
                <td>Name</td>
                <td><input  name=”txtName” type=”text”></td>
            </tr>
            <tr>
                <td>Password</td>
                <td><input placeholder=”4 to 15 chars only” type=”password” minlength=”4″ maxlength=”10″ required></td>
            </tr>
            <tr>
                <td>URL</td>
                <td><input type=”url”></td>
            </tr>
            <tr>
                <td>Age</td>
                <td><input type=”number” min=”15″ max=”40″ value=”32″ name=”txtAge”></td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input type=”email”></td>
            </tr>
            <tr>
                <td>Date of Birth</td>
                <td><input type=”date”></td>
            </tr>
            <tr>
                <td>Fav. Color</td>
                <td><input type=”color”></td>
            </tr>
            <tr>
                <td>Upload Photo</td>
                <td><input type=”file”>
                    <input type=”range” min=”10″ max=”100″>
                </td>
            </tr>
            <tr>
                <td>PIN</td>
                <td><input type=”text” size=”3″ maxlength=”3″></td>
            </tr>
        </table>
        <br>
        <button>Register</button>
        </form>
    </body>
</html>

Browser Output:

html registration form
2. Horizontal Form: 
  • Horizontal Form large user input user se lene ke liye kiya jaata hai or sath hi user se documents upload option ko bhi add kiya jaata hai.
  •  Horizontal  form ke kiye ham example ke liye onliine job form jaise ki SSC online form or MPPSC online form or mponline form ko bhi dekh sakte hai.

 

चलो जानते है की HTML FORM के कोन कोन से ELEMENTS है

 html form ko ko design karne ke liye hame html form elements ko use karna padta hai kyki html form elements ke bina ham form ko design nahi kar sakte 

dekhe html registration form
  • <form>
    • form element ko html form design karne ke liye kiya jaata kyki usko use kiye bina form ko submit nahi kar sakte.
  • <input> 
    • input element ko user input fields ko create karne ke liye kiya jaata hai jaise ki username,password or date of birth jaisi information ke liye <input type=”passowrd”>
  • <textarea>
    •  textarea ka use user se address or Query ko as a input lene ke liye use kiya jaata hai <textarea>tEnter Address</textarea>.
  • <select>
    • Select element ka use Form Mai Dropdown ko create karne ke liye use kiya jaata hai. <select> <option>Hyderabad</option> </select>
  • <button>
    • button ka use form ko submit karne ke liye use kiya jaata hai. or html form ko ham generic button ke help se submit kar sakte hai.<input type=”button”> Submit</button>

 

Database Ke sath Form Kaise Work Karta hai 
 
  1. database ke sath interaction karne ke liye  ham form ko hi use karte hai
  2. html registration  Form ke sath ham kon kon se database Operation ko perform kar sakte hai chalo dekhte hai
  1. Insert operation
  2. Update Operation
  3. Delete Operation
  4. Fetch Operation

 

Insert Operation: 
  • Insert operation ko database mai koi information ko store karne ke liye use kiya  jaata hai jaise ki
    • facebook mai id ko create karne appki information facebook ke database mai store ho jaati hai
    • waise hi jaise aap apne computer Hard Disk mai data ko save karke rakhte ho.
    • jab App online vacancy ka form apply karte ho tab aapka data SSC or MPPSC jis bhi vacancy or department ka form fill kar rahe ho unke Database mai aapki information save ho jaati hai.
  • Update Operation: update operation tab use karte hai jab ham apni kisi information mai kuch changes karna chahte hai ya usko modify karna chahte tab ye operation ferform hota hai
    • jaise ki aap apni facebook account se Apna name change kar sakte hai anytime,sath hi or bhi information ko change kar sakte hai ye sabhi operation Update operation keunder aata hai.
  • Delete Operation: Delete operation Bacically tab peform hota hai jab aap apne account se kisi information ko permanatly Delete Ya remove karna chahte ho tab ye Operation Perform hota hai.
  • Fetch Operation: fetch operation ka use tab kiya jaata jab kisi website ya application mai kuch search karte jai jaisi ki hame amazon.com per kisi specific product ko search karna hai
    • facebook ke through ham kisi friend ko online search kar sakte hai isliye ye operation Fetch means data ko database ke lekar aata or user show karata hai.
 
Conclusion:
 
Hum ye Aasha Karte hai ki aapko Hamara ye html se related form article pasand aaya hoga. Agar aapko form se related HTML practise karne mai kisi bhi tarah ki problem aa rahi hai ya koi topic mai problem hai to aap hame anytime comment kar sakte hai or ya for contact us page ke through hame mail bhej sakte hai ham aapko jald hi aapke question ka answer karrege dhanywaad friends.
 
 

LEAVE A REPLY

Please enter your comment!
Please enter your name here