HTML: Preassign HTML Form with Data

In this tutorial, I would like to show you how to preassign the different HTML input boxes and option fields with data or default values.

In the following, you can find examples for the following HTML input elements - each with and without pre-assignment:

• Single-Line Text Input Field: Input Text
• Multiline Text Box: Textarea
• Option Switch: Checkbox and Radiobutton
• Pick List: Select

If the default values are set, the visitor of your page can find the preset directly after loading the website.

Input Text - Single-Line Text Input Field

A single line text input field can be defined with  <input type="text"> in HTML.

<input name="it" type="text">
<input name="it" type="text" value="">

The text presetting is defined using the attribute "value". If you completely omit this attribute or if you are writing value="", that is an empty string, the text input field keeps empty.

<input name="it" type="text" value="Text in the Input Field.">

By defining a string between the quotes behind "value", this text is used as default value for the input field.

Textarea - Multiline Text Box

A Textarea is a big multiline field for text input.

<textarea name="ta"></textarea> 

An empty textarea is defined by <textarea></textarea>.

<textarea name="ta">
This text appears in the text field.
</textarea> 

You can set a presetting by just writing the default text between the opening tag <textarea> and the closing tag </textarea>.

Checkbox and Radiobutton - Option Switch

Checkboxes and Radiobuttons are option switches, at which the user can make a hook. The difference between a checkbox and a radiobutton is, that checkboxes can be activated and deactivated independently from each other while there can only be one radiobutton from one radio button group can be selected at the same time.

<input type="checkbox" name="cb1" value="cb1">
<input type="checkbox" name="cb2" value="cb2">

<input type="radio" name="rb1" value="0">
<input type="radio" name="rb1" value="1">

<input type="radio" name="rb2" value="0">
<input type="radio" name="rb2" value="1">

Here, we are defining two checkboxes that are selectable independent from each other as well as four radiobuttons that are grouped in two different groups. The group assignment is determined by having the same name. In this example, no hook is set.

<input type="checkbox" name="cb1" value="cb1" checked="checked">
<input type="checkbox" name="cb2" value="cb2">

<input type="radio" name="rb1" value="0" checked="checked">
<input type="radio" name="rb1" value="1">

<input type="radio" name="rb2" value="0">
<input type="radio" name="rb2" value="1" checked="checked">

In order to set a checkmark by default, we are adding the attribute "checked" with the value "checked" - that is checked="checked". In the example, we have hooked and activated the first checkbox as well as one radio button from each group.

Select - Pick List

We can define a select list by <select> .. </select>. Therein, we can write some select-able items with <option> .. </option>. The attribute "size" defines how many options are visible at the same time. If you use 1 for this, the result is a drop-down list.

<select name="sel" size="1">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

If we are using the list from this example, automatically, the first element (the "A" here) is preselected.

<select name="sel" size="1">
  <option>A</option>
  <option selected="selected">B</option>
  <option>C</option>
</select>

In order to preselect another element from the list, we can use the HTML attribute "selected" like in the following example. This would do a preselection of the element "B".