Forms¶

The forms allow the website user to send information to the server. We use the <form> tag to create the form. It should contain two attributes:

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

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

<form action="/some/relative/url" method="post">
    <label for="firstname">Put 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">Send data</button>
</form>

Form fields¶

As in the previous example, each form field should be in the <input> tag. Moreover, if it is to be sent, it should have the name attribute, 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, it is possible to define what type of data to enter via the artybut type. 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 - gives you the option to check or uncheck an option
• file - allows you to send a file
• number - allows you to enter a numeric value.

When using the radio type, we must remember that thename attribute is the same for 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">Course start</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">Send your life choices</button>
</form>

In addition, the forms also contain such tags as:

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

<textarea cols="10" rows="10" name="message" placeholder="Type something"></textarea>

• <select> - allows you to create a drop-down list. The next elements of the list are given in the <option> tag. In the value attribute you should specify the value to be taken by the variable from thename attribute after selecting the appropriate option. The startup option will be the first one on the list or the one with the selected attribute with 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">New York</option>
</select>

Button for sending data¶

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

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

Both tags will behave the same - they will display the button, but the button is a tag that can have content (as opposed to theinput tag), so it gives us a bit more options.

Such a button can be declared, e.g. by means of:

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

The field label¶

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

• as a separate element and indicate the target field with the for attribute, which points to the value of the field's id attribute.
• as the element inside which is the field to which this label belongs.

The following example shows both approaches:

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

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

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