This site contains free Javascript code, tips on CSS, forms, links, Dreamweaver, PHP and MySQL. Also hints on SEO (Search Engine Optimisation). There is also some stuff on Google Maps and Google Analytics and advice on Google Adwords and Adsense. Where possible I will also recommend sites that offer free enhancements and how to incorporate those enhancements into your web site.
All code here can be copied freely. It would be great if you could incorporate a link to this site from your site and I will reciprocate.
When using these form tips it is assumed that you know a bit about creating them and are confident about editing the HTML code.
READONLY and DISABLED both remove the functionality of the input field, but to different degrees. READONLY locks the field: the user cannot change the value. DISABLED does the same thing but takes it further: the user cannot use the field in any way, not to highlight the text for copying, not to select the checkbox, not to submit the form. In fact, a disabled field is not even sent if the form is submitted.
Currently only MSIE recognizes either of these attributes.
Read Only:
<INPUT NAME="realname" VALUE="Hi There" READONLY>
Disabled:
<INPUT NAME="realname" VALUE="Hi There" DISABLED>
It's important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field. For many types of fields, READONLY is irrelevent because you don't normally change the value. In checkboxes, for example, you can check them on or off (thus setting the CHECKED state) but you don't change the value of the field. DISABLED, however, actually prevents you from using the field. Notice in these examples that you can set the checkboxes even though they are "read only":
<INPUT NAME="mushrooms" TYPE=CHECKBOX READONLY>mushrooms<BR>
<INPUT NAME="onions" TYPE=CHECKBOX READONLY>onions<BR>
<INPUT NAME="peppers" TYPE=CHECKBOX READONLY>peppers
<INPUT NAME="mushrooms" TYPE=CHECKBOX DISABLED>mushrooms<BR>
<INPUT NAME="onions" TYPE=CHECKBOX DISABLED>onions<BR>
<INPUT NAME="peppers" TYPE=CHECKBOX DISABLED>peppers
<input name="txtname" type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="12"id="txtname2">
The OPTION tag is used to create options listed in a drop down box of a form. You can select a default option, by adding the word "selected" within your OPTION tag.
<SELECT> <OPTION>option 1 <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT>
You can display default text within your text input boxes that magically disappears when you click inside the box. This will enable you to provide your visitors with an example of text they should place within your text box.
<INPUT type="text" name="url" value="Please enter you text here" size="30" onfocus="value=''">
Place the following code witin your <BODY> tag. This code tells the browser to place the cursor within the "customer" form in the "email" text box.
<body onLoad="focus();customer.email.focus()">
The "customer" text represents the name of your form. The name attribute should be added to your form like this:
<form name="customer">
You can change the name to whatever you'd like. However, make sure you also change it within your <BODY> tag as well. They must be the same.
The "email" text represents the name of your form element. The <input> attribute should be written like this:
<input type="text" name="email">
You can change the "email" name to whatever you'd like. However, make sure you also change it within your <BODY> tag as well. They must be the same.
You can enable your visitors to tab through your form fields simply by adding "tabindex" to your INPUT tags.
<FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="text" name="name" size="20" maxlength="30" tabindex="1"> <INPUT type="text" name="address" size="20" maxlength="30" tabindex="2"> <INPUT type="text" name="email" size="20" maxlength="30" tabindex="3"> <INPUT type="text" name="url" size="20" maxlength="30" tabindex="4"> <INPUT type="Submit" VALUE="Submit"> </FORM>
The "tabindex" value determines the order in which you will tab through the text boxes. If you would like the tab order to skip a certain area, such as check boxes and radio buttons, simply use a negative value beginning with "-1" then "-2" and so on. Each negative value will be bypassed when tabbing through your form.
SEO - Search Engine Optimisation
Search Engine Optimisation from now on we will call it SEO is the process of getting your web site noticed by the search engines, and hopefully, up its ranking on the results listing. This page offers some guidance.
Note that with search engines, CONTENT IS KING.
....more to follow
Coming Soon!
This page will contain links to lists that you can copy into your html code for use in forms. The following will be available:
Geographical
History
Sport
Other
|
The lists are in a format <option>... with the first line as 'Please select from list'. They are text files. Its simply a case of copying the list into your code and change any text that you see fit. |
With Dreamweaver its easy enough to add an 'email/Contact Me' type of link. However this can be enhanced with a little of tweaking in the Properties inspector. When you highlight the link in dreaweaver design view and look to the Link property in the Property Inspector you will see something like this:
mailto:ggwillym@yahoo.com
Now, if you add a question mark followed by subject=
Then add some text. See the following example:
mailto:ggwillym@yahoo.com?subject=Sports Reporting
When a user clicks on the mail link it will add the text 'Sports Reporting' to the subject line in the users email. Useful for knowing which web page the user is sending the email from.
Variants:
mailto:ggwillym@yahoo.com?subject=Sports Reporting&cc=fsmith@hiap.com
What will this do? this will add the email address fsmith@hiap.com to the cc section of the email.
mailto:ggwillym@yahoo.com?subject=Sports Reporting&body=Please state the nature of your complaint
What will this do? It will add the text 'sports Reporting' to the subject line of the users email and add the text 'Please state the nature of your complaint' to the body of the email.
If you don't have Dreamweaver or a web design package you just need to edit the HTML code.