Forms¶

Forms allow the user to send information to the server. To create a form we use the <form> tag. It should contain two attributes:

• action - defines what action is to happen after the form is sent (and more precisely, to what address the form data will be sent).
• method - defines which HTTP method will be used to send the form. The default method is GET, but we use POST more often.

Inside the <form> tag you should place the form fields that are filled in by the end user, e.g. GET:

<form action="/some/relative/url" method="post">
    <label for="firstname">Enter first name: </label>
    <input type="text" name="firstname" id="firstname" /> 

    <label for="message">Enter message: </label>
    <textarea cols="10" rows="10" name="message" id="message"></textarea>

    <button type="submit">Submit</button>
</form>

Form fields¶

As in the previous example, each form field should be placed in the <input> tag. In addition, if it is to be sent, it should have an attribute name in which we give the name of the variable under which it will be available.

The <input> tag allows you to enter one-line text or other short values depending on the field type. For the <input> tag, you can define which data type you enter via the type attribute. Possible values are e.g:

• text - allows you to enter one-line text
• radio - allows you to choose one of the many options available
• date - allows you to select a date
• checkbox - allows you to select or deselect a certain option
• file - allows you to send a file
• number - allows you to enter a numerical value.

When using the radio type, you have to remember that the attribute of name is the same for all options available in one group. The following example shows the use of <input> tags with different types:

<form action="/some/relative/url" method="post">
    <label for="welcome">Say hello: </label>
    <input type="text" name="welcome" id="welcome" />

    <label for="termsOfUse">I agree that SDA is the best</label>
    <input type="checkbox" name="termsOfUse" id="termsOfUse">

    <div>
        <label for="opt1">Option 1</label>
        <input name="opt" id="opt1" type="radio">
        <label for="opt2">Option 2</label>
        <input name="opt" id="opt2" type="radio">
        <label for="opt3">Option 3</label>
        <input name="opt" id="opt3" type="radio">
    </div>

    <label for="startDate">Start of the course</label>
    <input type="date" name="startDate" id="startDate">

    <label for="age">Your age</label>
    <input type="number" name="age" id="age">

    <label for="fileUpload">CV:</label>
    <input type="file" name="fileUpload" id="fileUpload">

    <button type="submit">Submit your life choices</button>
</form>

In addition, the forms also contain tags such as:

• <textarea> - allows you to enter text in multiple lines. The attributes cols and rows define the number of columns and rows.

<textarea cols="10" rows="10" name="message" placeholder="Enter some data"></textarea>

• <select> - allows you to create a drop-down list. The next elements of the list are given in the <option> tag. The value to be taken by the variable from the name attribute should be given in the value after selecting the appropriate option. The starting option will be the first one in the list or the one with the selected attribute of the same value, e.g:

<select name="city">
    <option selected="selected">...</option>
    <option value="value1">Warsaw</option>
    <option value="value2">London</option>
    <option value="value3">Paris</option>
</select>

Data Sending Button¶

The button sending the form data should be located inside the form tag. We can define it using it:

• the input tag and the attribute type with a value of submit and the attribute value that accepts the displayed text
• of the button and the attribute of the type with the value of submit.

Both tags behave in the same way - they display a button, but the button is a tag that can have content (as opposed to the input tag), which gives us a bit more possibilities.

Such a button can be declared like this:

<input type="submit" value="Submit" /> 

Field label¶

Each field of the form should contain a label. We can create such a label using the label tag. We can define it:

• as a separate element and indicate the target field with the for attribute, which indicates the value of the id attribute of the field.
• as the element within which the field to which this label belongs is located.

The following example shows both approaches:

<label for="firstName">First name: </label>
<input type="text" name="firstName" id="firstName" />

<label>Last name:
    <input type="text" name="surname">
</label>

NOTE: By clicking on the appropriate label, the cursor will activate the corresponding field of the form and set the cursor there allowing you to enter data.