View
17
Download
0
Category
Preview:
Citation preview
Learn HTML BasicsLesson No : 04 (First Part)
Publisher : Attitude Academy
The <form> ElementHTML forms are used to collect user input.The <form> element defines an HTML form:
HTML Forms
<form>form elements</form>HTML forms contain form elements.Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.
The <form> ElementAction and method is Form Attribute
Type Description
Action This Attribute defines the action to be performed when the form is submitted
Method This attribute specifies the HTTP method (GET or POST) to be used when submitting the forms
The Action AttributeThe action attribute defines 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:
<form action="action_page.php">
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:
<form method="get“> Or <form method="post">
The Method Attribute
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.php"> <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 a drop-down list:Example:<body><form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"></form> </body>
The <label>The <select> element defines a drop-down list:Example:<body><form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"></form> </body>
The <select> Element (Drop-Down List)The <select> element defines a drop-down list: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</option> <option value="audi">Audi</option> </optgroup></select></form> </body>
The <button> Element
The <button> element defines a clickable button:
<body><button type="button" onclick="alert('Hello World!')">Click Me!</button> </body>
PRACTICALIMPLEMENTATION
Recommended