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:
- 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".
About the Author
You 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
Send Form Input as an Array to PHP Script
Tip | 0 Comments
Send HTML5 Canvas as Image to Server
Tutorial | 0 Comments
How to Replace multiple Texts at the same Time
Tutorial | 0 Comments
How to resize Image before Upload in Browser
Tutorial | 13 Comments
jQuery: Count characters from multiple input fields
Tip | 0 Comments
PHP/MySQL: How to store dynamic field's values in Database
Open Question | 0 Answers
XAMPP: How to set up SSL/HTTPS for local Projects
Tutorial | 4 Comments
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.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.