Introduction To HTML Introduction To HTML Form InputsForm Inputs

Written By George Gimian Written By George Gimian

FormsForms

Forms are used to make web Forms are used to make web pages more interactivepages more interactive

They allows us to collect They allows us to collect information from the web pageinformation from the web page

The information is collected via The information is collected via input text boxes or checkboxes or input text boxes or checkboxes or radio buttons as we will learn radio buttons as we will learn todaytoday

FormsForms

The basic form structure is as The basic form structure is as followsfollows<form><form>

content content

</form></form> As you can see it takes the form As you can see it takes the form

of any standard html tag.of any standard html tag.

Forms – Attributes Forms – Attributes

Forms like every other tag has Forms like every other tag has attributes:attributes:– Action – this is used to tell a web page Action – this is used to tell a web page

do this when I press the button on this do this when I press the button on this pagepage

– Method – Get (data sent to server Method – Get (data sent to server appended) or Post (transaction body) appended) or Post (transaction body)

– Target – where is the information Target – where is the information going to be displayedgoing to be displayed

Forms – ButtonsForms – Buttons

To create a button on your page To create a button on your page which works in contribution to which works in contribution to your form simply:your form simply:

<form><form>

<input type=“button” <input type=“button” value=“Press Me”>value=“Press Me”>

</form></form>

Forms – Buttons Forms – Buttons

Forms – ButtonsForms – Buttons

If you have created an action for a If you have created an action for a form though you should use a form though you should use a submit button to send your submit button to send your information via email or via information via email or via another file. Or a reset button to another file. Or a reset button to reset the page.reset the page.

<form><form>

<input type="submit" value="Send"><input type="submit" value="Send">

<input type="reset" value="Reset"><input type="reset" value="Reset">

</form></form>

Forms – Inputs (text)Forms – Inputs (text)

Adding an input to the form is Adding an input to the form is also very simple. You simply say:also very simple. You simply say:<form><form>

<input type=“text” /><input type=“text” />

</form></form>

This tells the browserTo expect input This tells the browser

The type of input to expect

Because the input tag Doesn’t have a closingTag you must put a spaceAnd backslash to make it XHTML compatible

Forms – Inputs (text)Forms – Inputs (text)

Adding an input to the form is Adding an input to the form is also very simple. You simply say:also very simple. You simply say:<form><form>

<input type=“text” /><input type=“text” />

</form></form>

Text can have attributes:-name-size-maxlength

Forms – Input (text) Forms – Input (text) ExampleExample For example:For example:

<form><form>Please enter your first name: <input type=“text” Please enter your first name: <input type=“text” /><br />/><br />

Please enter your surname: <input type=“text” /><br Please enter your surname: <input type=“text” /><br />/>

</form></form>

Forms – Input (text) Forms – Input (text) ExampleExample

Forms – Input (text)Forms – Input (text)

What about if I want some What about if I want some information in the text box initially?information in the text box initially?

Well all we simply do is use the Well all we simply do is use the value attribute of the input tag!value attribute of the input tag!

Eg:Eg:

<input type=“text” name=“Firstname” value=“Please <input type=“text” name=“Firstname” value=“Please enter your first name” />enter your first name” />

Forms – Input (text) Forms – Input (text) ExampleExample

Forms – Input Forms – Input (Password)(Password) What happens if you want to What happens if you want to

enter a password into a field enter a password into a field though? You don’t want everyone though? You don’t want everyone to see youre password!to see youre password!

Well there is a solution. You Well there is a solution. You simply use a password fieldsimply use a password field

<input type=“password” /><input type=“password” />

Forms – Input Forms – Input (Password) - Example(Password) - Example

Forms – Multiple-Line Forms – Multiple-Line Text AreasText Areas What if you would like a multiple What if you would like a multiple

line input? Well its simple you line input? Well its simple you simply use the following tag:simply use the following tag:

<textarea name=“Comments”><textarea name=“Comments”>

</textarea></textarea>

With this tag it has two main With this tag it has two main attributes:attributes:– Rows – the height of the text boxRows – the height of the text box– Cols – the width of the text boxCols – the width of the text box

Forms – Multiple-Line Forms – Multiple-Line Text Areas ExampleText Areas Example

Forms – Radio ButtonsForms – Radio Buttons

How can we make an easy solution How can we make an easy solution were a user can select from one were a user can select from one option only within a selection? option only within a selection? Simple using a Radio Button, Simple using a Radio Button, which is another input type.which is another input type.

A Radio button list needs to have A Radio button list needs to have the same name to be part of a the same name to be part of a selection listselection list

Forms – Radio ButtonsForms – Radio Buttons

Eg:Eg:<form><form>

Please select from the following:Please select from the following:

<input type=“radio” name=“r1” <input type=“radio” name=“r1” value=“Selection 1”> Selection 1 <br />value=“Selection 1”> Selection 1 <br /><input type=“radio” name=“r1” <input type=“radio” name=“r1” value=“Selection 2”> Selection 2 <br />value=“Selection 2”> Selection 2 <br /> <input type=“radio” name=“r1” <input type=“radio” name=“r1” value=“Selection 3”> Selection 3 <br />value=“Selection 3”> Selection 3 <br />

</form></form>

Forms – Radio ButtonsForms – Radio Buttons

Forms – Check BoxesForms – Check Boxes

How can we make an easy How can we make an easy solution were a user can select solution were a user can select more than one option within a more than one option within a selection? Simple using a Check selection? Simple using a Check Box, which is another input type.Box, which is another input type.

A Check Box needs to have the A Check Box needs to have the same name to be part of a same name to be part of a selection listselection list

Forms – Check BoxesForms – Check Boxes

Eg:Eg:<form><form>

Please select from the following:Please select from the following:

<input type=“checkbox” name=“c1” <input type=“checkbox” name=“c1” value=“Selection 1”> Selection 1 <br />value=“Selection 1”> Selection 1 <br /><input type=“checkbox” name=“c1” <input type=“checkbox” name=“c1” value=“Selection 2”> Selection 2 <br />value=“Selection 2”> Selection 2 <br /> <input type=“checkbox” name=“c1” <input type=“checkbox” name=“c1” value=“Selection 3”> Selection 3 <br />value=“Selection 3”> Selection 3 <br />

</form></form>

Forms – Check BoxesForms – Check Boxes

Forms – Select MenusForms – Select Menus

How can we make an easy How can we make an easy solution were a user can select solution were a user can select one option within a drop down one option within a drop down selection? Simple using a selection? Simple using a Selection Menu, which is another Selection Menu, which is another input type.input type.

Forms – Select MenusForms – Select Menus

Eg:Eg:<form><form>

Please select a colour:Please select a colour:

<select name=“Colour” size=“3”><select name=“Colour” size=“3”>

<option value=“blue”>blue</option><option value=“blue”>blue</option>

<option value=“red”>red</option><option value=“red”>red</option>

<option value=“pink”>pink</option><option value=“pink”>pink</option>

<option value=“white”>white</option><option value=“white”>white</option>

</select></select>

</form></form>

Forms – Select MenusForms – Select Menus

Forms – Select MenusForms – Select Menus

Eg:Eg:<form><form>

Please select a colour:Please select a colour:

<select name=“Colour” size=“1”><select name=“Colour” size=“1”>

<option value=“blue”>blue</option><option value=“blue”>blue</option>

<option value=“red”>red</option><option value=“red”>red</option>

<option value=“pink”>pink</option><option value=“pink”>pink</option>

<option value=“white”>white</option><option value=“white”>white</option>

</select></select>

</form></form>

Forms – Select MenusForms – Select Menus

Forms – The Forms – The PossibilitiesPossibilities Forms have endless possibilities which Forms have endless possibilities which

are detailed on w3schools:are detailed on w3schools:– SubmenusSubmenus– File uploadsFile uploads– Hidden fieldsHidden fields– ButtonsButtons– etcetc

Forms – SubmenusForms – Submenus

<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>