HTML Forms

• Collect Information from User
• HTML <input> Elements
• Similar to GUI Elements
• Send Data to Web Server/Application

Simple Input Form

<form action="/search" method="POST">
    <label for="keywords">Search Keywords</label>
    <input type="text" id="keywords" name="keywords">
    <button type="submit">Search</button>
</form>

displays as

Input Elements

• text - text input
• checkbox - boolean checkbox
• date - date picker
• file - file chooser
• number - numerical input
• password - password field
• select - drop-down box
• submit - submit button

Related Elements

• label - caption for element
• fieldset - group similar fields
• legend - caption for fieldset

Form Submission

1. User Submits Form
2. Data Encoded by Browser
3. Data Sent to Server via HTTP
4. Server Decodes Data
5. Server Validates Data
6. Response Returned via HTTP

HTML Form Example

    <form action="/customitems" method="POST" >
        <div class="form-row">
            <div class="col form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" name="name" value="">
            </div>
        </div>
        <div class="form-row">            
            <div class="col form-group">
                <label for="name">Price</label>
                <input type="number" min="0" step="0.01" class="form-control" id="price" name="price" value="0.0">
            </div>
        </div>
        <div class="form-row">
            <div class="col form-group">
                <label for="name">Calories</label>
                <input type="number" min="0" step="1" class="form-control" id="calories" name="calories" value="0">
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    

Rendered Form

Developer Tools

HTTP POST Request

HTTP Headers

Parsed Data

Encoded Data