Creating Your First Form

The <form> tag is used to create the actual form – it looks like this:

<form>
	Input elements
</form>

The <form> tag contains the content of your form. This content is called form widgets, controls or fields – they all describe the same thing. This content is mostly different kinds (or states, which is actually the correct word to use) of input fields and a button here and there. Let’s have a look at a very simple form with just two input fields and a submit-button:

<form>
	First name: <input type="text" name="firstname" /> <br />
	Surname: <input type="text" name="surname" /> <br />
	<input type="submit" value="Submit now" />
</form>

As you can see, the input fields are defined by the <input> element. The input element represents a typed data field, which the user can edit. The type-attribute defines which input state you are using, in this case a regular text element, and the name attribute denominates the individual input fields. The type attribute is the master switch that determines what the input element really is.

The button is also defined using the <input> element but the value of the type attribute is "submit" as opposed to "text" in the two previous fields and this indicates that this is a submit button. The submit button has an additional attribute, value. The value of the value attribute defines what the button is going to say and for our example I choose "Submit now".
As you have probably noted by now, the <input> element is an empty element and therefore it is self-closing, using the / at the end.

Tip!

It is always nice when you have the possibility to shorten your markup without compromising on the quality and you have the opportunity when you create regular text input fields in your form. You can omit the type attribute and the browser will automatically interpret the input field as a regular text field. That means that the two following input elements gets treated exactly the same:

<input type="text" />
<input />