How to create a form using HTML only

0
html-forms-technepal

HTML(Hyper-text Markup Language) is a markup language that is used to create anything for being displayed on a web browser. HTML is a basic and first step to frontend programming and designing assisted by CSS(Cascading Style Sheets) and JavaScript. In this article, we will be learning about creating a simple yet working forms using HTML only. You can later add custom CSS and JS to create more UX and functional form.

HTML Code for creating a simple form:

  1. <!DOCTYPE HTML>
    <html>
    <head>
    <title>Register Form</title>
    </head>
  2. <body>
    <form>
    <table>
    <tr>
    <td>Name :</td>
    <td><input type=”text” placeholder=”Enter your Name”></td>
    </tr>
  3. <tr>
    <td>Password :</td>
    <td><input type=”password” placeholder=”Enter your Password”></td>
    </tr>
  4. <tr>
    <td>Gender :</td>
    <td>
    <input type=”radio” name=”Gender”> Male
    <input type=”radio” name=”Gender”> Female
    <input type=”radio” name=”Gender”> other
    </td>
    </tr>
  5. <tr>
    <td>Hobbies:</td>
    <td>
    <input type=”checkbox” name=”dancing”>Dancing
    <input type=”checkbox” name=”dancing”>Singing
    <input type=”checkbox” name=”dancing”>Programming
    </td>
    </tr>
  6. <tr>
    <td>Attach:</td>
    <td><input type=”file” name=””></td>
    </tr>
  7. <tr>
    <td>Email :</td>
    <td><input type=”email” placeholder=”enter your email”></td>
    </tr>
  8. <tr>
    <td>Phone no :</td>
    <td>
    <select>
    <option>+977</option>
    <option>+91</option>
    <option>+901</option>
    </select>
  9. <input type=”phone” placeholder=”enter your phone number”>
    </td>
    </tr>
  10. <tr>
    <td>Date</td>
    <td><input type=”datetime-local” name=””></td>
    </tr>
  11. <tr>
    <td>Knowledge:</td>
    <td><input type=”range” name=””></td>
    </tr>
  12. <tr>
    <td><input type=”button” value=”Demo Button”></td>
    </tr>
  13. <tr>
    <td><input type=”submit” value=”Submit”></td>
    </tr>
  14. <tr>
    <td><input type=”reset” name=””></td>
    </tr>
  15. </table>
    </form>
    </body>
    </html>

Output:

html-forms-technepal

You will be able to create the same form as above using the provided codes. There are many other <input> types in HTML but they are not much in practice nowadays. Now, you have the code and output as well, lets find out how this code works.

HTML code explanation for creating a form

  1. Every code written in HTML must be started with <html> tag and ended with </html> tag. We write it to define the root of a HTML document. The <!DOCTYPE HTML> tag tells the compiler that the code written is in HTML and follows all the rules of writing a HTML code.
  2. <head> tag contains the metadata for the code(file). It tells the compiler the code between <head> and </head> tag is to be displayed at the top. <title> tag defines the title for the document. It can be seen in the top of the browser that you are using.
  3. <body> tag includes everything that is to be shown on the website after the <head> tag.
  4. Since we are creating a form so <form> tag is used. Everything within <form> and </form> are the properties of the form that we create.
  5. <table> tag is used to tell the compiler that we are creating a table within form section.<tr> represents rows in a particular table section and <td> defines the cells in that table. We used <tr> and <td> in our code to assure every input types used in the form are seperate and well aligned. Initially, the properties of <tr> tag is set default to left alignment.
  6. The input types that we have used in this form are:
  • Text : It stores input in text field.
  • Password : The data entered in this field is not shown and is hidden while typing.
  • Radio : It provides single choice to the user to select from available options.
  • Checkbox : It provides multiple choices to the user to select from available options.
  • File : It is used to let user attach a file in the form.
  • Email : It lets user enter their email address. The form shows error if the filed in it doesn’t end with “.com”
  • Phone : It lets the user enter phone numbers.
  • Date : It provides complete set of calendar to select date and time from.
  • Range : It shows a slider where you scroll left and right to your specific point.
  • Button : A button that can be used to do any things like redirecting to other links, refreshing the page, auto-filling specific text, etc.
  • Submit : It submits the data that you entered on the form to the form receiver.
  • Reset : It resets everything that you entered on the form.

Also read,

1st program in C language

Visit Author Here

LEAVE A REPLY

Please enter your comment!
Please enter your name here