Scribd
Upload
23 views18 pages

Lab Lec10

Uploaded by

Haidar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views18 pages

Lab Lec10

Uploaded by

Haidar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Form

Forms
An HTML form is used to collect user input.
The user input is most often sent to a server
for processing.
The HTML <form> element is used to create
an HTML form for user input.
The <form> element is a container for
different types of input elements, such as: text
fields, checkboxes, radio buttons, submit
buttons, etc.
The <input> Element

 The HTML <input> element is the most used


form element.
 An <input> element can be displayed in

many ways, depending on the type attribute.


Type Description

<input type="text"> Displays a single-line text input


field

<input type="radio"> Displays a radio button (for


selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting


zero or more of many choices)

<input type="submit"> Displays a submit button (for


submitting the form)

<input type="button"> Displays a clickable button


<html>
<body>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><
br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
<input type="radio" id="male" name="gende
r" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gen
der" value="female">
  <label for="female">Female</label><br>
<input type="checkbox" id="vehicle1" name
="vehicle1" value="Bike">
  <label for="vehicle1"> I have a
bike</label><br>
  <input type="checkbox" id="vehicle2" name
="vehicle2" value="Car">
  <label for="vehicle2"> I have a
car</label><br>
<input type="text" id="lname" name="lname"
 value=“Submit"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>
Form Attributes

 The action attribute defines the action to be


performed when the form is submitted.
 Usually, the form data is sent to a file on the

server when the user clicks on the submit


button.
 <form action="/action_page.php">
  <label for="fname">First
name:</label><br>
  <input type="text" id="fname" name="fname
" value="John"><br>
  <label for="lname">Last
name:</label><br>
  <input type="text" id="lname" name="lname
" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>
 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").
 The default HTTP method when submitting

form data is GET. 


 <form action="/action_page.php" method="g
et">
 <form action="/action_page.php" method="p

ost">
Form Elements
 The HTML <form> element can contain one or more of the
following form elements:
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>
<html>
<body>
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname
">
 <label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
 <option value="fiat" selected>Fiat</option>
 <textarea name="message" rows="10" cols="

30">
The cat was playing in the garden.
</textarea>
 <button type="button" onclick="alert('Hello

World!')">Click Me!</button>
</form>
</body>
</html>
 Thank you

You might also like