Desigining a Simple Form in Html

0
1610
Simple form

Today in this Html tutorial we will learn to design a simple Html form where you will have different fields in which you can insert data.

  • For desigining an Html form follow the steps given below :

  1. Create a new folder and name it whatever you want.
  2. In that folder, create two more folders and name them CSS and images respectively
  3. In CSS folder create a text document and name it style.css
  4. In images folder paste the images you want to use in your html document.
  5. Now open Notepad++ and write the following code n it :

    <!DOCTYPE html>
    <html>
    	<head>
    	     <title>HTML Forms</title>
    	     <link rel="stylesheet" href="css/style.css" type="text/css" />
    	</head>
    	<body>
    	<div id="container">
    	<h1>Registration Form</h1>
    		<form method="post" action="process.php">
    		    <ul>
    		    <li>
    			<label>First Name: </label>
    			<input name="first_name" type="text" />
    			<br />
    			<label>Last Name: </label>
    			<input name="last_name" type="text" />
    			<br />
    			<label>Email: </label>
    			<input name="email" type="email" />
    			<br />
    			<label>Favorite Food: </label>
    			<select name="food">
    			<option value="pizza">Pizza</option>
    			<option value="hamburgers">Hamburgers</option>
    			<option value="Steak">Steak</option>
    			</select>
    			<br />
    		<label>Gender: </label>
    		<input type="radio" name="gender" value="Male" />Male
    		&nbsp; 
    		<input type="radio" name="gender" value="Female" />Female
    		<br />
    		<label>Message: </label>
    		<textarea name="message"></textarea>
    		<br /><br />
    		<input type="submit" value="Register" />
    		</li>
    		</ul>
    		</form>
    	</div>
    	</body>
    </html>
    
  6. After writing the code your window will look like as shown below

  7. Now save your document as index.html
  8. Now open the style.css text file that you have created in the CSS folder and write the following code in it.

    body{
    	background-color:#f4f4f4;
    	font-family:arial;
    	font-size:14px;
        }
    
    
    #container{
    	width:460px;
    	margin:auto;
    	border:1px solid #cccccc;
    	padding: 0 20px 20px 20px;
    	border-radius:10px;
    	background:#ffffff;
    	min-height:400px;
            }
      
    li{
    	list-style:none;
      }
    
    label{
    	display:inline-block;
    	width:150px;
         }
    
  9. Now save it.

  10. Now run your index.html file and you will have the following output.

  11. Now you can insert the data into that form
  12. After inserting the data you will have the following display.

  13. Thus we have designed an Html form.

LEAVE A REPLY

Please enter your comment!
Please enter your name here