Forms and buttons
-
Upload
cherrybear2014 -
Category
Technology
-
view
92 -
download
2
description
Transcript of Forms and buttons
![Page 1: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/1.jpg)
![Page 2: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/2.jpg)
Forms and
Buttons
![Page 3: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/3.jpg)
Button
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
![Page 4: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/4.jpg)
Example (tags)
<html><head><title>Buttons</title></head><body><a href="http://www.google.com"> <button> Search </button> <a/>
</body></html>
![Page 5: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/5.jpg)
FORMS
are used to pass data to a server.
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
![Page 6: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/6.jpg)
The <form> tag is used to create an HTML form:
<form>.input elements.</form>
![Page 7: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/7.jpg)
HTML FORM INPUT ELEMENTS
![Page 8: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/8.jpg)
1. Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>
![Page 9: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/9.jpg)
2. Password Field
<input type="password"> defines a password field:
<form>Password: <input type="password" name="pwd"></form>
![Page 10: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/10.jpg)
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY 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 11: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/11.jpg)
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>
![Page 12: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/12.jpg)
Drop-down List
<html><body>
<form><select> <option value="Nokia">Nokia</option><option value="Samsung">Samsung</option><option value="Blackberry">Blackberry</option><option value="Apple">Apple</option></select></form>
</body></html>
![Page 13: Forms and buttons](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b6656c4a79592d298b45f3/html5/thumbnails/13.jpg)
Submit Button
<html><head><title>Buttons</title></head><body><a href="http://www.google.com"> <button> Search </button> <a/>
</body></html>