Making Forms in HTML

formCreating your first HTML forms can be pretty exciting and a bit tricky as well! However, once you will sit with the coding, soon you will find it interesting and a sheer joy in creating your first complete HTML document. The HTML forms will help you to create a useful Feedback Form for your website and the good news is that you don’t even need to know the CGI or programming language.

For building an HTML form, you need to get the following tools:

  • A text editor (notepad, Dreamweaver etc)
  • Any HTML editor will work but that can be used for the manipulating form items and attributes
  • A webpage where you want the feedback and a server location for the feedback page
  • 30 minutes free time (or even less than that)

For making an HTML form you need the opening and the closing tag.

1
<form method=post action="url"> ... form content ... </form>

While creating forms all input fields are placed between the tags. You can have multiple forms on a single page that may not have nest forms. All the methods are being specified by the protocol and use the pass to form data to process program. For transmitting post you can use data, the action considered to be URL and this helps in submitting the data for processing.

Steps to build HTML

  • Open the text editor and create a blank page
  • Build the main page with container elements
1
2
3
4
5
6
<html>
    <head>
        <title>Feedback Form</title>
    </head>
    <body style="background-color:#ffffff">
</html>
  • Give a heading to the page
1
<h1>Feedback Form</h1>
  • Start with the form and you will have a tag of special elements:
1
2
3
4
5
action="mailto:mail@my-email.com"  //this helps to send the forms for the email address
method="get" //this sends request to mail program
enctype="text/plain" //this makes the results readable in your email box
<form action="mailto:mail@my-email.com" method="get" enctype="text/plain">
  • Now add question in your form, where the feedback form will have three questions like the name, the rating and the comment
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    Name: <input type="text" name="name" size="30" /><br />
    Please rate my site from 1 to 10 (1=bad, 10=good): <br />
        <select name="rating">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option selected>10</option>
        </select>
    How would you suggest I improve it?<br />
    <textarea name="improve" rows="5" cols="30"></textarea><br />
    <input type="submit" value="Send Feedback" />
    <input type="reset" />
    </form>
</body>
</html>

Now your form is ready to get upload on the web. Before uploading, validate the HTML coding and check whether there are any errors or typos.

More Variations

For more options in order to make the form more interactive and appealing, you can try out the following methods.

1
For trying out password fill in forms: <input type="password" name="pw">

For any field you want to hide from the user and which the developer can use for passing out value or user input. In the same way, you can use disabled attribute and by setting it disabled, you can make the field unavailable.

1
2
<input type="text" disabled="disabled" name="disabled" value="cannot be changed">
<input type="text" readonly="readonly" name="readonly" value="cannot be changed">

This is not the best way of making a mailform, but we just made this page to show you how HTML forms work. If you really do want to make a GOOD mailform try using PHP, as it allows you to hide your e-mail address and do so much more!