Blog

HTML Trick With Forms

Oct 22nd, 2009 - 1 comments

HTML Forms are used when we need the user’s input, like Name, Email Address, Age etc.

Through the usage of forms we can also take in the user’s choice in some particular scenario. A common use of Forms is in taking Feedback and Suggestions in any website.

Here we illustrate the code required to set up a Form to take Suggestions.

<FORM action="mailto:your@email.com" method="post"> <TABLE BORDER="0" CELLSPACING="1" CELLPADDING="4" WIDTH="75%"> <TR> <TD width="20%"><DIV align="right"> <B>Name:</B> </DIV> </TD> <TD width="80%"> <INPUT type="text" name="name" size="15"> </TD> </TR> <TR> <TD><DIV align="right"><B>Email:</B></DIV> </TD> <TD> <INPUT type="text" name="email" size="30"> </TD> </TR> <TR> <TD><DIV align="right"> <B>Suggestions:</B> </DIV> </TD> <TD><TEXTAREA name="suggestion" cols="30" wrap="virtual" rows="4"> </TEXTAREA> </TD></TR> <TR> <TD> </TD> <TD> <INPUT type="submit" name="submit" value="Submit"> <INPUT type="reset" name="reset" value="Reset"> </TD></TR> </TABLE> </FORM>

Here is how the above code will display a Suggestion Form.

Your browser may not support display of this image. Here Name/Email/Suggestions are Input Fields for the user. We have made the input type as text (see the code) so the user will need to enter in, text in these Input Fields.

Basically, we have drawn a table in which we have placed the input fields and their markers. This ensures that all the fields are in line and look neat as well.

The 2 buttons at the bottom of the Form ‘Submit’ and ‘Reset’ are very essential. The Submit Button will take all the data entered by the user and save it accordingly as per the code.

Whereas, the Reset Button will clear out all the fields and the user would need to fill in the form again. After filling up the form correctly, the user would need to press the Submit Button so that the information entered by him can be saved.

Comments

Posted By:peterjohn
Comment Body:iam really thankful to your guidence i like it very much http://www.psd2htmlslice.com/


New Comment

Your Name:
Your Email:
Comment Body:
 
Captcha:
 

About

Welcome to the SnobbySlice blog! Here we post design and developer-centric tutorials, articles, and giveaways. Read up and comment on some of our great content!

Interested?