How To Create Form Fields

Table of contents:

How To Create Form Fields
How To Create Form Fields

Video: How To Create Form Fields

Video: How To Create Form Fields
Video: How To Create Fillable Forms In Microsoft Word (Create HR Template Forms) Part 1 2024, December
Anonim

The processing of the data that visitors send to the server after filling out the web forms is handled by a special program (script). Therefore, it makes sense to add fields to a form posted on a web page only if functions for working with these fields are programmed into the script. If this condition is met, it remains to do a relatively simple part of the work of adding tags to the source code of the page that form the required fields.

How to create form fields
How to create form fields

It is necessary

Basic knowledge of HTML

Instructions

Step 1

The operation of forming the necessary tags can be taken over by the page editor, if you have the opportunity to use the visual editing mode in it. Such an editor can be an integral part of the content management system - enter it and load a page with a form in which new fields should be added. Use the copy and paste operations - select and copy a couple of existing elements (the input field and the text associated with it), then click on the page where the additional field should be placed and paste the copied one.

Step 2

After that, edit the properties of each element of the pair separately. Just select the inscription with the mouse and type new text, and for the input field use the button in the editor panel that opens its properties. In the properties, at least you need to change the value in the name field - it must match the field name programmed in the processing script. Repeat copy / paste for the required set of fields and save the page.

Step 3

If there is no access to visual editing, open the source code of the page in any text or specialized editor and add the necessary tags to it. This method requires some knowledge of HTML and web page layout techniques. To add a simple text field to the form, use the input tag, adding the value text to the type attribute. In addition to this attribute, only name is required - it must contain the name of this form field known to the handler script. Using other attributes, you can set the number of characters that visually determine the length of the input field (the size attribute), the maximum allowable number of characters (maxlength), style parameters (style), class membership (class), etc. This tag can be seen in the code, for example like this:

Step 4

For a multiline text field, use the textarea tag. It consists of two parts - opening and closing. In the first, you must set the name value, and using the rows and cols attributes, you can set the number of rows and columns of this form element. For example:

Step 5

Other types of form fields can be checkboxes - to form them also use the input tag, but unlike a single-line text field, specify the checkbox value in the type attribute. If this form element needs to be checked, add the checked attribute to its tag. For example:

Step 6

To insert a select box into the form and upload a file, use the same input tag with the file value in the type attribute. For example:

Step 7

A more complex construction forms a field with a drop-down list. It must contain a pair of opening and closing select tags. Place pairs of option tags in between, each specifying a single selection line. The opening tags must contain the value attribute (its value will be sent to the server), and between the opening and closing parts, place the text that the visitor will see in this line of the list. For example: First selection line Second selection line Third selection line

Recommended: