HTML Form InputsHTML Form Inputs

Creating a basic formCreating a basic form

<form><form>……content goes here…content goes here…

</form></form>

ControlsControls

Text inputsText inputs Check boxesCheck boxes Radio buttonsRadio buttons Select menusSelect menus File selectsFile selects Buttons ( “submit”, “reset”, push)Buttons ( “submit”, “reset”, push)

The majority of controls are created with “input” tagThe majority of controls are created with “input” tag

Text inputText input

<form><form><input <input typetype=“text” />=“text” /></form></form>

Type tell us what kind of control is

Attribute of text input:

name

size

maxlength

value

Password:Password:<input type=“password” name=“Password” /><input type=“password” name=“Password” />

Textarea:Textarea:<textarea name=“Comments”></textarea><textarea name=“Comments”></textarea>

attributes: cols, rows, wrapattributes: cols, rows, wrap

Radio buttonsRadio buttonsInput tag and “radio” in type attributeInput tag and “radio” in type attribute

Check buttonsCheck buttonsInput tag and “checkbox” in type attributeInput tag and “checkbox” in type attribute

Select Menus Select Menus also called ”drop-down menus”also called ”drop-down menus”

<select name=“Somename” <select name=“Somename” sizesize=“3”=“3”<option value=“value1”>value1</option><option value=“value1”>value1</option><option value=“value2”>value2</option><option value=“value2”>value2</option><option value=“value3”>value3</option><option value=“value3”>value3</option><option value=“value4”>value4</option><option value=“value4”>value4</option><option value=“value5”>value5</option><option value=“value5”>value5</option>

</select ></select >

how many visible at once

SubmenusSubmenus<select name=“TimeDay”><select name=“TimeDay”><optgroup label=“Monday”><optgroup label=“Monday”>

<option value=“Monday AM”>Monday morning</option><option value=“Monday AM”>Monday morning</option><option value=“Monday PM”>Monday afternoon</option><option value=“Monday PM”>Monday afternoon</option>

</optgroup></optgroup><optgroup label=“Tuesday”><optgroup label=“Tuesday”>

<option value=“Tuesday AM”>Tuesday morning</option><option value=“Tuesday AM”>Tuesday morning</option><option value=“Tuesday PM”>Tuesday afternoon</option><option value=“Tuesday PM”>Tuesday afternoon</option>

</optgroup></optgroup></select></select>

File uploadsFile uploads

<form><form><input type=“file” name=“PhotoUpload” /><input type=“file” name=“PhotoUpload” />

</form></form>

ButtonsButtons SubmitSubmit

- when pressed, this button processes the form- when pressed, this button processes the formtype=“submit”type=“submit”

ResetReset- when pressed, this button resets all the form’s fields back to their - when pressed, this button resets all the form’s fields back to their initial valuesinitial values

type=“reset”type=“reset” (Push) Buttons(Push) Buttons

- when pressed, an action or event is triggered, based on a - when pressed, an action or event is triggered, based on a predefined script or functionpredefined script or function

type=“button”type=“button”