Веб-формы (Web forms)

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">

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">

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 is web form.
  2. Describe the purpose od web form.
  3. List the features of the web form.

Exercises:

 


Exam questions:


 

Категория: Programming languages | Добавил: bzfar77 (14.01.2021)
Просмотров: 39 | Теги: option, Password, checkbox, Radio, form, Date, Select, submit, Input, text | Рейтинг: 5.0/1
Всего комментариев: 0
avatar