Introduction to HTML Forms

The form that you see below is the comment form of YPEC's sign up page. HTML forms are easy to create and to implement, provided that you have a web host or server that will receive and process the input data. The comment page of this post is another example of HTML form.

HTML forms utilize CGI and PERL programs for them to function. CGI stands for Common Gateway Interface while PERL stands for Practical Extraction and Report Language. CGI is the interface that allows communication between the server and the user while PERL is the program that allows the transfer, encoding, and interpretation of data.

Forms allow your site to be interactive by providing interface for the readers. HTML forms can be created by using the <form> tags.

HTML forms have two basic attributes, namely, method and action. Method refers to how the data is collected or sent to the server or host. The two basic types of method are post and get. "Post" deals with bigger type of data while "get" deals with smaller type of data. On the other hand, action refers to the CGI or PERL link on which the data will be posted.

Inside the "form" codes, the "input" element is contained. It refers to the type of data being asked. Examples of input include text, password, radio buttons, and check boxes.

For the sake of simplicity, the "post" type of method and "text" type of input will be shown here. In the example given below, the codes that are used are the following:

<form action="http://ypec.wordpress.com/wp-comments-post.php" method="post" id="commentform">

<fieldset>

<p><label for="author">Name</label> <input name="author" id="author" value="" tabindex="1" type="text"> <em>Required</em></p>

<p><label for="email">Email</label> <input name="email" id="email" value="" tabindex="2" type="text"> <em>Required, hidden</em></p>

<p><label for="url">Url</label> <input name="url" id="url" value="" tabindex="3" type="text"></p>

<p><label for="comment">Comment</label> <textarea name="comment" id="comment" cols="45" rows="10" tabindex="4"></textarea></p>

<p><input name="comment_post_ID" value="4" type="hidden">

<input name="submit" value="Submit" class="button" tabindex="5" type="submit"></p>

</fieldset>

</form>

If you want to join YPEC, please fill in the form shown below.



YPEC Sign Up Form:

Name Required

Email Required, hidden

Url

Address and Contact Number