Welcome to Web Design Guide
|
|
Web Page Design Graphic Article
You can't think of a matter on web design without thinking about Web
Forms.
In fact, Web Forms is the fundamental step in a web design that makes the site
interactive. For. e.g. a simple email capture form can take your site miles
ahead and can become a vital ingredient of your web design.
The Basics of Web Forms.
Whenever you want people to enter data and send it to you, you need a web form.
Whether the data is as simple as a username and password or as complicated as a
full address form, the basic principles remain the same.
The Tags.
As you know, tags forms the basics of any web design and web forms are no
different. It has it's own specialized tags that you can easily integrate into
the html of your web design.
But fortunately web form tags are very easy to add into your HTML. You can
decide on what type of web form you want integrated into your web site right
from the planning stage on your web design.
Form tags have always been a troublesome part of HTML, simply because they're
not often used and require you to memorize a lot of words, depending on what
kind of input boxes you want on your form.
To set up a form, you need to have a form tag with a method and an action, like
this:
We have also translated parts of this composition into French and Spanish to
facilitate easier understanding of web design. In this way, more people will get
to understand the composition.
<form method="post" action="action.php"></form>
Now, do not let these strangle looking characters scare you out of your web
design. Don't you think you can simply cut and paste the above tag in the
structure of your web design?
These properties aren't very well-named, but they basically tell the browser where and how you want things that are entered on the form to be sent. The file named in action should be a script that is prepared to do something with the data from your form, such as entering it into a database.
It's worth knowing that you can make use of odd things like "mailto:youremail@address.com"
as the action (that one submits by email), although it's not recommended in your
web design. This is primarily because, there are email harvester that can
harvest your email fill your email box with spam! Hence this is not recommended
in your web design.
Once you've got that, the next step is to put input tags between the form tags.
There are lots of different kinds of input tags, and you say which kinds you
want using the 'type' property. For example:
<input type="checkbox" name="example">one</input>
Don't you think you are getting the general feel and hang of how forms are used
in your web design. .
This is a checkbox tag (the boxes you can tick). The name property lets you give
the checkbox a name so you can refer to it your scripts later on. The text
between the tags ('one') is what appears next to the tick box.
Other input types include:
text - a text box.
radio - a set of options where only one can be chosen.
button - a clickable button.
file - a box that allows someone to upload a file to your site.
submit - a special kind of button that sends the result of the form to the
server.
reset - a button that clears everything a user has entered in the form, so they
can start over.
Web Forms and CSS.
Those forms you just made, however, aren't going to be pretty: they'll be
displayed in only the most basic style, one after the other and surrounded by
ugly boxes. Luckily, it's simple to add some styling using CSS in exactly the
same way as you would add it to normal text. You can change the boxes'
background-color, font (font-family), remove the borders, and so on.
You might also like to make use of the various CSS 'events', such as the hover
event. Since CSS has become a convenient way for making changes in web
design and structure of a web site on the fly, knowing this aspect of web design
has become very important.
Take a look at this example CSS:
input:hover {
background-color: yellow;
}
It makes the input box go yellow when the user hovers over it – combine that
with a bit of Javascript that automatically moves the typing cursor into input
boxes that the user hovers over, and you've got an easier to use form right
away. Try as much as you can to make your input boxes look and behave like ones
you like in software you find easy to use, and you won't go far wrong.
Validating Input.
Once the user has typed something in, you need to validate it – that is, check
it makes sense. If they're supposed to be filling in an email address, there
needs to be an @ in there somewhere. If they've chosen a username, you need to
make sure it's not already been taken by someone else. That kind of thing.
There are two ways of validating input: client-side and server-side. To put it
simply, client-side validation is done by Javascript, and is purely there for
the user's convenience, so they don't have to submit a form only to find out it
was wrong. Server-side validation will be done with a language like PHP, and is
the final check before the data gets written to a database – if it's wrong at
that point, you have to throw the user an error page and ask them to re-enter
the relevant piece of information.
It's very important that you don't leave vital checking purely up to the
Javascript, as some of your visitors may have Javascript turned off, or may even
turn it off deliberately to get around your checks. The last thing you want is
people being able to fill your database with bad information.
We hope this article has shown some light on integrating Web Forms to your Web
design. There are more articles on web design on this site. Enjoy them too.
|
|
|
Web Page Design Graphic Best products
Web Page Design Graphic News
Reading Eagle Company Internet Services, Reading, PA ~ Website design and hosting (Reading Eagle)
Reading Eagle Company Internet Services offer website design & development services, online advertising, and full-service graphic design services for large and small businesses.
Read more...Hempfield graduate's art romance a Web gem (Pittsburgh Tribune-Review)
"The Dreamer," set during the American Revolution, has earned fans worldwide. The love story is being made into a graphic novel.
Read more...The Facebook Tea Party (Mashable)
How fun do you imagine it would be to see your design wrapped around paper packets of tea leaves and herbal blends? No, really, how fun? Because that’s what UK-based Lancashire Tea is looking to strike interest in. The tea packager has tapped The Rehab Agency, a marketing consultancy, to produce three designs, which, along with the original graphic, has been put up for a vote on Facebook , ...
Read more...SWOT: NEW MEDIA (Post Magazine)
For many post studios, "new media" means "new business." But facilities are still trying to figure out how they can make money in this emerging genre. The Web, games, mobile content and even special venues have all been identified as potential avenues in which to deliver content. But budgets can still be conservative, which is a challenge in creating content that's often more complex than a ...
Read more...Humor helps local entrepreneur find balance between work, home (Culpeper Star-Exponent)
Even if you have never met Kelly Rozwadowski, chances are you know her. Perhaps not by face or name, but by design.
Read more...Spencer Forrest's X5 Web Site Gets a Facelift; Aims to Educate Consumers About Beating Hair Loss (PRWeb via Yahoo! News)
The Web site of the X5 Hair Laser is now fully enhanced to demonstrate how it benefits those treating hair loss.
Read more...