Making forms on a Basic HTML web page




Basic HTML forms for beginners



Home page   Basic html   html tables   Text and font tags   Image tags   Javascript   Free Tracking   Website hosting   Free traffic

Html Forms for the beginner and first time webmasters.
Explained on this page are the submit button - reset button - text field - radio buttons - check boxes
- password field.
To find the cgi or java script instructions for the action attributes
and method get and post attributes check your web site host.

Basic form rules :
  • Html form tags cannot be nested together

  • Each set of form tags must be independent from each other
    This is one set of form tags   <form></form>  
  • A password field alone is not a secure link

  • The password field by itself only hides the text on the users screen
    A secure link between the browser and server is a sperate matter
  • The wrap attribute in <textarea> fields is by default set off.

  • This puts text on a single line until the enter key is pressed
  • Forms have html elements handled by browsers and script elements handled by servers

  • Here we will be looking at the html elements handled in your browser
    When you are using forms on your website you will need to find the cgi or java script instructions
    for the action attributes and method get and post attributes for your server.
    They are usually on your server site or you can contact your server webmaster.
For complete rules and the very latest in html and HTML 4.01 Specifications
Visit www.w3c.org
The World Wide Web Consortium
A very basic HTML form The HTML Code to put the form on your site

<form action="W" method="X">
<input name="Y" type="text" value="Enter e-mail address">
<button name="senddata" type="submit">Submit</button>
</form>
For the above example on your web site:
  • The form action value W would be replaced with the URL of the processing script.
  • The form method value X would be replaced with GET or POST.
  • The input name value Y can be anything you like to best describe the data field in your reports.
  • The input type text could be replaced with RADIO or CHECKBOX. ( Shown Below Left)
  • The input value Enter e-mail address could be left blank.
  • It will be what ever the user typed into the text area when the submit button is clicked ( Shown Below Middle)
  • The word Submit can be replaced with a button name( Shown Below Right)


Simple form layout The HTML Code for the form layout view on the left

My web server uses
Linux Unix Apache Other

The internet browsers I use are

Iexplorer Netscape Fire fox Other


 My web server uses
<br><br>
<form>
<input name="host" type="radio" value="linux">Linux
<input name="host" type="radio" value="unix">Unix
<input name="host" type="radio" value="apache">Apache
<input name="host" type="radio" value="other">Other
<br><br>
The internet browsers I use are
<br><br>
<input name="ie" type="radio" value="iexplorer">Iexplorer
<input name="nn" type="radio" value="netscape">Netscape
<input name="ff" type="radio" value="fire fox">Fire fox
<input name="ob" type="radio" value="other">Other
<br><br>
<button name="senddata" type="submit">Submit</button>
<button name="cleardata" type="reset">Reset</button>
</form>
Note that in the example form above you can only select one radio button in the first row.
This is a property of radio buttons selecting any button in a group deselect's
all other radio buttons in that group.
You assign groups using the input name value "host" is used in this example.
Use names that will relate to your question and make sense in your form report.
The second row uses a different name value for each button and you can select
all the radio buttons in the second row.
Basic HTML password form The HTML password form code

User ID
Password
 <form action="W" method="post">
<input name="ID" type="text" value=" " size="8" maxlength="8">User ID
<br>
<input name="pass" type="password"  value=" " size="8" maxlength="8">Password
<br>
<button name="senddata" type="submit">Login</button>
</form>
For the above example:
  • The form action value W would be replaced with the URL of the processing script.
  • The form method value is post this method sends all form elements names / values and is more browser compatible then get
  • The input name value pass and ID can be anything you like to best describe the data field in your reports.
  • The input type is password in the second input field this replaces the keyboard characters typed with an asterisk
  • Size sets the length of the text box and maxlength sets the number of characters allowed to be typed in by a user at 8
  • A password field alone is not a secure link

  • The password field by itself only hides the text on the users screen
Basic HTML drop-down form The HTML drop-down form code

What would you like most in a web host ?
 <form>
What would you like most in a web host ?
<select name="mydropdown">
<option>Cheap web hosting</option>
<option>High band width</option>
<option>FTP file access</option>
</select>
</form>

Copyright © 2004 2010 FunwithyourPC
Contact Us