11.5.3.2 create forms for data entry using HTML tags

Web forms

A web form is a collection of objects that allows you to collect user data for processing.
Standard elements are used for data entry.

<form action="/action_page.php" method="post">
...form content...
</form>

The action attribute defines the action to be performed when the form is submitted. In this case, the form data will be transferred by the post method to a file "action_page.php" for processing. 

The method attribute specifies the HTTP method to be used when submitting the form data. The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

Input Type Text

Full name: <input type="text" name="firstname" value="Input your full name">

The attribute name allows the content of the input to be identified as a variable when passing data for processing. The attribute value fills the element's default value with data. Usually used to prompt the user.

Input Type Submit

<input type="submit" value="Submit">

It defines a button for submitting form data to a form handler.

Input Type Radio

<input type="radio" name="choice" value="yes">
<label>Yes</label><br>
<input type="radio" name="choice" value="no">
<label>No</label><br>

Input Type Checkbox

  <input type="checkbox" name="food1" value="Burger">
  <label for="food1">Burger</label><br>
  <input type="checkbox" name="food2" value="French fries">
  <label for="food2">French fries</label><br>
  <input type="checkbox" name="food3" value="Coca-Cola">
  <label for="food3">Coca-Cola</label>

Input Type Password

  <label for="username">Username:</label><br>
  <input type="text" name="username"><br>
  <label for="passw">Password:</label><br>
  <input type="password" name="passw">

Input Type Date

<label for="birthday">Birthday:</label>
<input type="date" name="birthday">

Input Type Email

<label for="email">Enter your email:</label>
  <input type="email" name="email">

Input Type Number

<label for="grade">Your grade: (between 1 and 11):</label>
 <input type="number" name="grade" min="1" max="11">

The <select> Element

<label for="subject">Choose a subject:</label>
<select name="subject">
  <option value="Computer science">Computer science</option>
  <option value="Math">Math</option>
  <option value="Physics">Physics</option>
  <option value="Chemistry">Chemistry</option>
</select>

Multiple Selections

<label for="subject">Choose a subject:</label>
<select name="subject" size="4" multiple>
  <option value="Computer science">Computer science</option>
  <option value="Math">Math</option>
  <option value="Physics">Physics</option>
  <option value="Chemistry">Chemistry</option>
</select>

The <textarea> Element

<textarea name="message" rows="6" cols="50">
Style sheet - a collection of rules about how to present an HTML document.
</textarea>

Input Type Reset

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Input first name"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Input last name"><br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

Reset button, returns all form values to their default values.

Questions:

1. Explain what web form is.
2. Describe the purpose of web form.
3. List the features of the web form.
4. Explain the purpose attributes "action" and "method" of tag "form".

Exercises:

Ex. 1 Create a web form according to the template:

Ex. 2 Create SignUp, LogIn, and other input web forms for your project.

Exam questions: