Using Html Forms
We use forms when it is necessary to receive and process information from visitors on our website. The user can enter the necessary information thanks to elements such as text box, check box, radio button in the form.
We can create form and form elements with HTML codes, but we need other languages to operate with the data entered in the form. Information on the client side javascript to handle, if the handle inside the server side programming languages such as ASP.NET and PHP are used.
Form Tag
Specifies the start and end of the form. All other form elements are located between these tags.
<form action="url-address" method="get or post" target="window" >
….
</form>
The action parameter specifies the path to the file containing the codes that will process the information entered in the form. For example, using a php file can be processed with the information entered in the form.
The method parameter determines the method by which the information entered in the form will be sent to the relevant place. It can take two values, Get or Post. When the Get value is used, the information is added to the current address and moved and can be seen in the address bar. Using the post value is a safer method.
Input tag
Elements such as textbox, checkbox, radiobutton, confirmation and reset buttons are created with this tag. Its parameters are:
type: The type of the element we will create is specified here.
name: We give a name to the object we will create. We must use it and give each element a different name. Only radio buttons are given the same name to those included in the same group.
src: If an image file is used, it is used to specify the address of the image file to be displayed.
align: It is used to determine the alignment-position. (left, right, center).
maxlength: It is used for text boxes and determines how many characters data entry is allowed to that element.
size: Determines how many characters wide the text box will be
checked: Used for radiobutton and checkbox elements. When used as Checked="checked", it ensures that the element is checked when the page is first opened.
disabled: When used as disabled="disabled", it disables that element. The element appears on the page but cannot be selected or changed.
Creating a textbox
<input type="text" name="tcNo" maxlength="11" size="11" />
Creating a password field
<input type="password" name="password" />
Creating a checkbox
Checkboxes allow the user to select as many of the listed options as they want. More than one selection can be made, or it can be left without any selection.
<input type="checkbox" name="hobbyFootball" />Football <br/>
<input type="checkbox" name="hobbyBasketball" />Basketball<br/>
<input type="checkbox" name="hobbyVolleyball" />Volleyball<br/>
Creating radio buttons
Radiobutton elements allow the user to select only one of the elements included in the same group. For this, all radio buttons in the same group are given the same name (with the name parameter).
<input type="radio" name="gender" value="E" />Mr <br/>
<input type="radio" name="gender" value="K" />Mr <br/>
Create a drop-down list and list
Drop-down menus are elements that, when clicked, drop down to make a selection. List elements, on the other hand, are drop-down menus that are always open and can be multi-selected when allowed.
If the size parameter is not used, a drop-down menu is created. If the size parameter is used, a list element is created as high as the line specified in this parameter.
The select parameter determines the start and end of the list. Each of the options to be displayed in the list is written between the option tags separately.
Multiple selection is allowed for lists by using the multiple="multiple" statement.
<select name="iller" >
<option>Canakkale</option>
<option>Ankara</option>
<option>Istanbul</option>
<option>Izmir</option>
</select>
A drop-down menu was created without using the size parameter above.
<select name="brands" multiple="multiple" size="5">
<option>Honda</option>
<option>Ford</option>
<option>Renault</option>
<option>Mercedes</option>
</select>
In this example, a list with a height of 5 lines is created using the size parameter and multiple selection is allowed.
Creating a confirmation and reset button
When the Submit button is clicked, the information entered in the form is sent to the relevant file for processing. When the reset button is clicked, it clears the data entered in the form. The type parameter specifies the type of the button.
<input type="submit" value="submit" />
<input type="reset" value="Clear Form" />
using html forms, html form examples, html form creation, what does maxlength do, html text box, html radio radio button creation
EXERCISES
It is useful to use tables to properly place form objects.
You can change the codes and see the result by clicking the Try It button.
Read 524 times.