HTML

• Design a Form

  <form>
  ...
  </form>
  

• Add Input Elements

text, radio and submit

<form>
  <p>
    <input type="text" name="location">
    <input type="radio" name="unit" value="metric" checked>&degC
    <input type="radio" name="unit" value="imperial">&degF
  </p>
  <p>
    <input type="submit" name="submit" value="Search">
    <input type="submit" name="submit" value="History">
    <input type="submit" name="submit" value="Help">
  </p>
</form>

• Add Action and Method

<form action="/" method = "post">
  ...
</form>

The default method when submitting form data is GET. However, when GET is used, the submitted form data will be visible in the page address field:

127.0.0.1:5000?location=shanghai&unit=metric

Note: GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too.

POST has no size limitations, and can be used to send large amounts of data.

In this task, I use post for weather and history, and get for help.

• Add Input Attributes

formmethod: The formmethod attribute overrides the method attribute of the <form> element.

<input type="submit" name="submit" value="Help" formmethod="get">

autofocus: the input text should be automatically get focus when the page loads. placehoder: specifies a hint that describes the expected value of an input text.

<input type="text" name="location" autofocus placeholder="City name: shanghai">

• Design a Table

Design a table to display the detailed weather information.

<table>
  <tr> <!--row-->
     <th>Pressure</th> <!--header-->
     <td>1019hPa</td> <!--cell-->
  </tr>
  <tr>
     <th>Humidity</th>
     <td>94%</td>
  </tr>
</table>

• Block and Inline Elements

  • Block-level elements: A block-level element always starts on a new line and takes up the full width available.

    • <div> : open used as a container for other html elements
    • <h1> -<h6>
    • <p>
    • <form>

  • Inline Elements: An inline element does not start on a new line and only takes up as much width as necessary.

    • <span>: open used as a container for text
    • <img>
    • <a>