HTML Form

Formula#

<form method="GET" action="/search">
  <input type="text" name="query"/>
  <input type="submit" value="Search"/>
</form>

Request line produced for input $v$ on a page http://<host>:<port>/<page>:

GET /<action or page>?<name>=<URL-encoded v> HTTP/1.1

Properties#

• Default method: GET (if method is omitted). GET submission: input values are appended as query parameters to the URL, e.g. /search?query=example. POST submission: values are sent in the request body instead of the URL.
• The name attribute of each <input> becomes the query parameter key; inputs without name are not sent.
• The action attribute specifies the target URL. If omitted, the form submits to the current page URL: <form action="prefix"> sends the request to prefix?abc=xyz.
• <input type="submit"> or <button type="submit"> triggers submission; the submit input is shown as a button labelled with its value.
• The values are URL-encoded: a space becomes +, ä becomes %C3%A4. The server must decode them.

Template variables#

A SERP (search engine result page) should be the original page, with the input field showing the query and augmented by the results. The HTML file contains template variables that the server substitutes before sending the page (HTTP Server):

<form>
  <input type="text" value="%QUERY%" name="query"/>
  <input type="submit" value="Search"/>
</form>
%RESULT%

%QUERY% is replaced by the query, %RESULT% by the result (e.g. the fuzzy prefix matches). Substituting raw user input here is a code-injection risk.

Contrast with JavaScript#

Example#

Sources#

• Slides 09, p. 18 (forms), p. 19 (template variables), p. 20 (URL encoding of form data)
• DBIS_VL09 > Forms, DBIS_VL09 > Template variables, DBIS_VL09 > URL encoding and decoding
• Sheet 09, Exercise 1.2
• DBIS Exam WS2324 (not published) T4.3