OIM3690 - Web Technologies

HTML Forms

HTML Forms

• Form in HTML allows users to input and submit data to a server.
  • It also can be used in conjunction with other tehcnologies such as Python to process the data and create dynamic web pages.
  • Can you identify instances of forms used on websites that you often visit?
• Form components:
  • <form>: the main container and its attributes: action, method, ...
  • Input controls: to collect data, including text fields, checkboxes, radio buttons.
  • <label>: to privide a text description for form controls.
  • <select>, <textarea>, <button>, ...
  • and many other form controls.

Form Example

<form method="post" action="https://oim.108122.xyz/form2">
      <input
        type="text"
        name="name"
        placeholder="Enter your full name here..."
      />
      <button type="submit">Send</button>
</form>

form Attributes

• action
  • It defines where the data gets sent
  • It must be a valid relative or absolute URL, for example:
    • <form action="https://www.google.com">
    • <form action="/process-form">
    • <form action="mailto:email-address">
• method
  • It describes how form's data is sent to server
  • The most common ones are the GET method and the POST method.
    • Compare GET vs. POST
  • We will use "POST" to send form data.

<input>

• Text line: <input type="text" />
• Password: <input type="password" />
• Radio buttons: <input type="radio" />
• Check boxes: <input type="checkbox" />
• Files: <input type="file" />
• Hidden data: <input type="hidden" />
• and many more ...

<input> attributes

• type: type of the input
• name: name of the input
  • submitted with the form as part of a name/value pair.
  • is a required attribute.
• other attributes (dependent on type of):
  • maxlength
  • placeholder
  • value
  • checked
  • ...

<input> Type: "text"/"password"

• Example

  <form>
    <label for="username">Username:</label>
    <input
      type="text"
      id="username"
      name="username"
      maxlength="100"
      placeholder="Username"
    />
  </form>
  

• Try type="password"

<input> Type: "radio"

• Example:

  <form>
  <div>
      Gender:
      <label>Male
      <input type="radio" name="gender" value="male" />
      </label>
      <label>Female
      <input type="radio" name="gender" value="female" />
      </label>
  </div>
  </form>
  

<input> Type: "checkbox"

• Example:

  <div>What product(s) do you own?</div>
  <div>
  <input type="checkbox" id="smartphone" name="products" value="smartphone" />
  <label for="smartphone">Smartphone</label>
  </div>
  <div>
  <input type="checkbox" id="desktop" name="products" value="desktop"/>
  <label for="desktop">Desktop computer</label>
  </div>
  <div>
  <input type="checkbox" id="laptop" name="products" value="laptop"
  checked />
  <label for="laptop">Laptop computer</label>
  </div>
  

<input> type: "submit"/"reset"

• Example:

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

  • These two <input>s are standard buttons.
  • The type value should not be changed.

Exercise: ex09.html

• Create a form that looks like what is shown below:
  
• set action="https://oim.108122.xyz/form2"

More Form Controls

• <select>
  • provides a menu of options
  • <option>
• <textarea>
  • allows user to enter multi-line plain-text
  • good for a comment on a review or feedback form.
• <button>
  • creates a clickable button
  • if there's only one <button> inside the <form>, that button will be treated as the "submit" button.

<select>

• Example:

  <div>
  <div>
      <label for="state-select">Which state do you live in?</label>
  </div>
  <div>
      <select name="state" id="state-select">
      <option value="">-- Please select your state --</option>
      <option value="ME">Maine</option>
      <option value="MA">Massachusetts</option>
      <option value="NH">New Hampshire</option>
      </select>
  </div>
  </div>
  

<textarea>

• Example:

  <div>
  <div>
      <label for="comments">Leave a Reply:</label>
  </div>
  <div>
      <textarea
      id="comments"
      name="comments"
      rows="5"
      cols="25"
      placeholder="Enter your comment here..."
      ></textarea>
  </div>
  </div>
  

<button>

• Use a <button> element if you want to
  • create a custom button
  • customize the behavior using JavaScript
• Example:

  <button type="submit">
          SUBMIT <img src="images/mailbox.png"  
                      height="30" 
                      alt="submit button" />
  </button>
  

Exercise: ex09.html (cont.)

• Add a drop-down menu.
• Add a text area for comments.
• Add two icon buttons.
• Add styles
  • make it look like the form in next slide
• set action="https://oim.108122.xyz/form2"
• Update sitemap.html and commit/push to GitHub.

Questions?