Skip to main content

DESIGN REGISTRATION FORM BY USING HTML & CSS

hello friends....

TAKE THE FIRST STEP TO KNOWLEDGE FRIENDS BECAUSE KNOWLEDGE IS FREE.

HTML CODE
*******************

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="regis.css">
<title>REGISTRATION FORM</title>
</head>
<body>

<h1>REGISTRATION FORM</h1>

<div id="main_box">
<table align="center">

<tr><td>FIRST NAME </td><td><input type="text" name="f_name" maxlength="20"></td></tr>

<tr><td>LAST NAME  </td><td><input type="text" name="l_name" maxlength="20"></td></tr>

<tr><td>EMAIL ID </td><td><input type="text" name="emil"   maxlength="15"></td></tr>

    <tr><td>MOBILE NUMBER </td><td> <input type="text" name="mobile_nu" maxlength="10"></td></tr>

    <tr><td>GENDER </td><td> Male<input type="radio" name="gender" value="mail"> 
                 Femail<input type="radio" name="gender" value="femail"></td></tr>

    <tr><td>ADDRESS </td><td> <textarea name="Address" rows="4" cols="30"></textarea></td></tr>

    <tr><td>HOBBIES </td><td> 
             <input type="checkbox" name="Hobby_Drawing" value="Drawing">Drawing
                 <input type="checkbox" name="cp" value="cp">Computer Programming</br>
                 <input type="checkbox" name="cricket" value="cricket"> Cricket
                 <input type="checkbox" name="dancing" value="dancing">Dancing</br>
                Other <input type="text" name="Other_Hobby" maxlength="30">
             </td></tr>
       
       <tr><td>
           <input type="submit" id="submit_btn" value="Submit">
       </td> 
       <td>
           <input type="reset" id="reset_btn" value="Reset">
       </td></tr> 
</table>

</div>

</body>

</html>


---------- *** ----------

CSS CODE
***************

body{
 margin: 0;
  padding: 0;
}

h1{
  text-align: center;
  font-family: verdana;
  color: green;
}

table{
  background-color: skyblue;
  padding: 20px;
}

td{
  /* background-color:whitesmoke; */
  padding: 10px 10px;
  border:1px dotted orange;
  font-weight: bold;
  font-family: Helvetica; 
}

#submit_btn{
  padding: 5px 20px;
  background-color: green; 
  border-radius: 10px;
  color: white;
  font-weight: bold;
  font-size: 15px;
}

#reset_btn{
  padding: 5px 20px;
  background-color: orange; 
  border-radius: 10px;
  color: white;
  font-weight: bold;
  font-size: 15px;
}

tr{
  text-align: center;
}

#main_box{
  width: 100%;
  /* border: 1px solid red; */

}


----------***----------

OUTPUT
============
------------------------------------------------------------------------------------------------------------------------
>> IF YOU LIKE THIS BLOG, PLEASE SHARE AND SUBSCRIBE. ALSO COMMENT              FOR THIS BLOG.
>> IF YOU HAVE ANY QUESTIONS PLEASE ASK IN COMMENT.
>> IF YOU WANT TO LEARN C PROGRAM WITH OUTPUT, SO VISIT THIS BLOG
      https://dnpdeveloper.blogspot.com/
>> IF YOU WANT TO LEARN C++ PROGRAM WITH OUTPUT, SO VISIT THIS 
      BLOG

>> MY INSTAGRAM ID : dnp176

Comments

Popular posts from this blog

MODERN WEBSITE CREATE BY USING HTML AND CSS

hello friends.... TAKE THE FIRST STEP TO KNOWLEDGE FRIENDS  BECAUSE KNOWLEDGE IS FREE. HTML CODE ******************* <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MODERN WEBSITE DESIGN</title> <link rel="stylesheet" type="text/css" href="modern_2.css"> <link href="https://fonts.googleapis.com/css?family=Saira+Stencil+One&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <header> <div class="main_header"> <div class="logo"> <img src="dnp_bg.png" width="100px" height="100px"> </div> <nav> <a href="#">home</a> <a href="#">about us</a> <a href="#">contact us</a...

MODERN WEBSITE CREATE BY USING HTML AND CSS

hello friends.... TAKE THE FIRST STEP TO KNOWLEDGE FRIENDS  BECAUSE KNOWLEDGE IS FREE. HTML CODE ******************* <!DOCTYPE html> <html> <head> <title>MODERN WEBSITE CREATE</title> <link rel="stylesheet" type="text/css" href="mord_site.css"> </head> <body> <header class="site-header"> <nav> <div class="logo"> <h1>DNP DEVELOPER</h1> </div> <div class="menu"> <ul> <li>Home</li> <li>About</li> <li>Contact Us</li> </ul> </div> </nav> <section> <div class="leftside"> <img src="1.png"> </div> <div class="rightside"> <h1>OUR MODERN WEBSITE</h1> <p>We Are the best website Developer Company.</p> <button>We...