XHTML and CSS - Introduction to XHTML Forms
Introduction to XHTML Forms
In this tutorial we're going to be looking at HTML forms, before this tutorial we've only really been displaying a webpage to the use, HTML forms are a way to get data from the user a login form for example. HTML forms are the border between web design and web programming and I'm unsure if this will be much use to you unless you're planning on learning a programming language to make websites, php for example so if you only plan on using HTML and CSS and not learning a programming language there might not be a whole lot of use in you learning forms, although I really do recommend learning a web programming language if you plan on ever making a serious website. Also for this reason I will only be able to show you how to submit data, not how to read it as that would require a programming language. The first thing we need to do is write a opening and closing form tag.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> </form> </body> </html>
All of your form elements, buttons, boxes, text areas etc are going to go between your form tags. We're going to make a login form, next we want to add in a text input with the name username, to do this we use the input tag and set the type to text and the name to username, also we'll add in some text so the user knows what the box dose.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> Username:<br/> <input type="text" name="username"><br/> </form> </body> </html>
The name can be set to anything you want to set it to, I'm using username in this tutorial as the input is for a username, it's a little bit like a id. The line brakes are not required it's just to make it look nicer, next we can add a password input, this is the same as the text input just change the type to password so the browser displays stars rather then plane text as you type, I'm also going to set the name to password as it's a password.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> Username:<br/> <input type="text" name="username"><br/> Password:<br/> <input type="password" name="password"><br/> </form> </body> </html>
Next I'm going to limit the amount of characters the user can put into the text area to 20 by setting the max length attribute to 20.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> Username:<br/> <input type="text" name="username" maxlength="20"><br/> Password:<br/> <input type="password" name="password"><br/> </form> </body> </html>
Next I'm going to add in a attribute called value, you can use value to populate the text area by default, I'm just going to set it to enter username.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> Username:<br/> <input type="text" name="username" maxlength="20" value="Enter Username"><br/> Password:<br/> <input type="password" name="password"><br/> </form> </body> </html>
When you view this in your browser you'll see that we have a text input for our username and a text area for our password and we can't put more then 20 characters into the username input.

Page generated in 0.0098 seconds.