Top Banner
HTML Forms [email protected]
17
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: HTML Forms Patrick.j.rice@gmail.com. What is a form.

HTML Forms

[email protected]

Page 2: HTML Forms Patrick.j.rice@gmail.com. What is a form.

What is a form

Page 3: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Another form

Page 4: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Forms

• A form is an area that can contain form elements.

• Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

• A form is defined with the <form> tag.

Page 5: HTML Forms Patrick.j.rice@gmail.com. What is a form.

For example

<form>.input elements.</form>

Page 6: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Input

• The most used form tag is the <input> tag. The type of input is specified with the type attribute.

<form>First name:<input type="text" name="firstname" /><br />Last name:<input type="text" name="lastname" /></form>

Page 7: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Gvies you

Page 8: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Radio Buttons

• Radio Buttons are used when you want the user to select one of a limited number of choices.

<form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female</form>

Page 9: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Gives you

Page 10: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Checkboxes

• Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>I have a bike:<input type="checkbox" name="vehicle" value="Bike" /><br />I have a car:<input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane:<input type="checkbox" name="vehicle" value="Airplane" /></form>

Page 11: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Gives you

Page 12: HTML Forms Patrick.j.rice@gmail.com. What is a form.

The Form's Action Attribute and the Submit Button

• When the user clicks on the "Submit" button,

• The content of the form is sent to the server.

• The form's action attribute defines the name of the file to send the content to.

• The file defined in the action attribute usually does something with the received input.

Page 13: HTML Forms Patrick.j.rice@gmail.com. What is a form.

What it looks like in HTML

<form name="input" action="html_form_submit.asp" method="get">Username:<input type="text" name="user" /><input type="submit" value="Submit" /></form>

Page 14: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Gives you

Page 15: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Email forms

• Getting a form to send a e-mail

• Use the mailto from

• Mind your spam

• No validation

• Always use JavaScript validation at a minimum if you can to avoid spammers

Page 16: HTML Forms Patrick.j.rice@gmail.com. What is a form.

<html><body><form action="MAILTO:[email protected]" method="post" enctype="text/plain">

<h3>This form sends an e-mail to W3Schools.</h3>Name:<br><input type="text" name="name“ value="yourname" size="20"><br>Mail:<br><input type="text" name="mail“ value="yourmail" size="20"><br>Comment:<br><input type="text" name="comment“ value="yourcomment" size="40"><br><br><input type="submit" value="Send"> <input type="reset" value="Reset">

</form></body></html>

Page 17: HTML Forms Patrick.j.rice@gmail.com. What is a form.

Adding PHP

• For people looking for an easer life

• http://phpformgen.sourceforge.net/