44 Votes

HTML: Preassign HTML Form with Data

Tutorial by Stefan Trost | Last update on 2021-05-13 | Created on 2015-01-27

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:

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.

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">

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

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

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".


About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.