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 :
- Create a new folder and name it whatever you want.
- In that folder, create two more folders and name them CSS and images respectively
- In CSS folder create a text document and name it style.css
- In images folder paste the images you want to use in your html document.
- 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 <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>
- After writing the code your window will look like as shown below
- Now save your document as index.html
- 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; } - Now run your index.html file and you will have the following output.
- Now you can insert the data into that form
- After inserting the data you will have the following display.
- Thus we have designed an Html form.
Now save it.
