Você está na página 1de 13

Learn HTML Basics

Lesson No : 04 (First Part)

Publisher : Attitude Academ


HTMLForms
The <form> Element
HTML forms are used to collect user input.The<form>element
defines an HTML form:
<form>form elements</form>
HTML forms containform elements.
Form elements are different types of input elements,
checkboxes, radio buttons, submit buttons, and more.

The <form> Element


Action and method is Form Attribute

Type Description
This Attribute defines the action to be performed when the form is
Action
submitted

This attribute specifies the HTTP method (GET or POST) to be used


Method
when submitting the forms
The Action Attribute
Theaction attributedefines the action to be performed when the
form is submitted.
The common way to submit a form to a server, is by using a submit
button.
Normally, the form is submitted to a web page on a web server.
In the example above, a server-side script is specified to handle the
submitted form:

The Method
<formaction="action_page.php">
Attribute
Themethod attributespecifies the HTTP method (GETorPOST) to be
used when submitting the forms:

<formmethod="get> Or
<formmethod="post">
HTML Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control (Note:about this tag we
define in lession 5(2nd part)
<textarea Defines a multiline input control (text area)
>
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup Defines a group of related options in a drop-down list
>
<option> Defines an option in a drop-down list
<button> Defines a clickable button
The <textarea> Element
The<textarea>element defines a multi-line input field (a
text area):
<body>
<form
action="action_page.p
hp">
<textarea
name="message"
rows="10"
cols="30">The cat was
playing in the
garden.</textarea>
<input
type="submit">
</form>
</body>
Grouping Form Data with <fieldset>
The<fieldset>element groups related data in a form.
The<legend>element defines a caption for the <fieldset>
element.
Example:
<form>
<fieldset>
<legend>Personal information:</legend>
First name: <input type="text" name="firstname"
value="Mickey>
Last name <input type="text" name="lastname"
value="Mouse>
<input type="submit" value="Submit">
</fieldset>
</form>
The <lagend>
The<select>element defines adrop-downlist:
Example:
<body>
<formaction="demo_form.asp">
<labelfor="male">Male</label>
<inputtype="radio"name="gen
der"id="male"value="male"><b
r>
<labelfor="female">Female</la
bel>
<inputtype="radio"name="gen
der"id="female"value="female"
><br>
<labelfor="other">Other</label
>
<inputtype="radio"name="gen
der"id="other"value="other"><
br><br>
<inputtype="submit"value="S
ubmit">
The <label>
The<select>element defines adrop-downlist:
Example:
<body>
<formaction="demo_form.asp">
<labelfor="male">Male</label>
<inputtype="radio"name="gen
der"id="male"value="male"><b
r>
<labelfor="female">Female</la
bel>
<inputtype="radio"name="gen
der"id="female"value="female"
><br>
<labelfor="other">Other</label
>
<inputtype="radio"name="gen
der"id="other"value="other"><
br><br>
<inputtype="submit"value="S
ubmit">
The <select> Element (Drop-Down List)
The<select>element defines adrop-downlist:
Example:

<body>
<form
action="action_page.php">
<select name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option
value="fiat">Fiat</option>
<option
value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
The <optiongroup> Element (Drop-
Down List)
The <optgroup> is used to group related options in a drop-down list.
If you have a long list of options, groups of related options are easier
to handle for a user.
Example:
<body>
<form>
<select>
<optgroup label="Swedish
Cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
</optgroup>
<optgroup label="German
Cars">
<option
value="mercedes">Mercedes</o
ption>
<option
The <button> Element
The<button>element defines a clickablebutton:

<body>
<button type="button"
onclick="alert('Hello
World!')">Click Me!
</button>
</body>
PRACTICAL
IMPLEMENTATION
Visit Us : Attitude Academy

Você também pode gostar