I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML Forms: Introduction

html / forms

Estimated reading time: 2 minutes, 5 seconds

Forms are ubiquitous on the web. Any time you provide a username and password to log into a site, add a comment to a blog, or order anything online, you are filling out a form.

This section covers the HTML needed to create a form, as well as touching on the principles of good form design. However, there are two important areas that we will need to leave unaddressed at this time:

  • We will not have the opportunity to cover the processing of form data, i.e. what happens after the user clicks the “Submit” button. HTML allows for the creation of the form, but allows for limited from validation, and that only in HTML5: that is, HTML creates the textboxes, etc, in our form, but does not check what the user types inside them. Even if you use HTML, you must also use at least one other web development language to double-check the validation, together with all the other tasks: inserting the validated user data into a database with , or checking it as a username/password combination, or sending the submitted information in an eMail. Typically these languages include , , Perl, ASP.Net, or some alternative. Processing of form data is covered in later articles.

  • The form we create will work just fine (up until the moment the user presses submit), but will look terrible. We use to control the appearance of forms, which is again covered in a later article.

Those with more confidence and/or knowledge in HTML are usually tempted to add more markup to their forms to make them “look better”. I know it is frustrating to see a form that doesn’t look the way you want it to, but don’t add markup other than what you see here. You’ll only be adding redundant or irrelevant tags that will get in the way when we add CSS to forms.

Also note that as we add markup to our page and test our form (by entering data into textboxes, making selections from drop-down menus, etc) the browser will remember what we have entered into the form, even after refreshing the page. (This is a feature added to prevent those who do accidentally refresh the page from losing their information). In order to see a truly renewed form, you will have to hard refresh the page. The keyboard shortcut to do this will change from one browser to the next. (CMD-SHIFT-R for Firefox on the Mac, as one example).

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.