Introduction To HTML Form Inputs Written By George Gimian

Forms Forms are used to make web pages more interactive Forms are used to make web pages more interactive They allows us to collect information from the web page They allows us to collect information from the web page The information is collected via input text boxes or checkboxes or radio buttons as we will learn today The information is collected via input text boxes or checkboxes or radio buttons as we will learn today

Forms The basic form structure is as follows The basic form structure is as follows<form>content</form> As you can see it takes the form of any standard html tag. As you can see it takes the form of any standard html tag.

Forms – Attributes Forms like every other tag has attributes: Forms like every other tag has attributes: –Action – this is used to tell a web page do this when I press the button on this page –Method – Get (data sent to server appended) or Post (transaction body) –Target – where is the information going to be displayed

Forms – Buttons To create a button on your page which works in contribution to your form simply: To create a button on your page which works in contribution to your form simply:<form> </form>

Forms – Buttons

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

Forms – Inputs (text) Adding an input to the form is also very simple. You simply say: Adding an input to the form is also very simple. You simply say:<form> </form> This tells the browser To expect input This tells the browser The type of input to expect Because the input tag Doesn’t have a closing Tag you must put a space And backslash to make it XHTML compatible

Forms – Inputs (text) Adding an input to the form is also very simple. You simply say: Adding an input to the form is also very simple. You simply say:<form> </form> Text can have attributes: -name -size -maxlength

Forms – Input (text) Example For example: For example:<form> Please enter your first name: Please enter your first name: Please enter your surname: Please enter your surname: </form>

Forms – Input (text) Example

Forms – Input (text) What about if I want some information in the text box initially? What about if I want some information in the text box initially? Well all we simply do is use the value attribute of the input tag! Well all we simply do is use the value attribute of the input tag! Eg: Eg:

Forms – Input (text) Example

Forms – Input (Password) What happens if you want to enter a password into a field though? You don’t want everyone to see youre password! What happens if you want to enter a password into a field though? You don’t want everyone to see youre password! Well there is a solution. You simply use a password field Well there is a solution. You simply use a password field

Forms – Input (Password) - Example

Forms – Multiple-Line Text Areas What if you would like a multiple line input? Well its simple you simply use the following tag: What if you would like a multiple line input? Well its simple you simply use the following tag: </textarea> With this tag it has two main attributes: With this tag it has two main attributes: –Rows – the height of the text box –Cols – the width of the text box

Forms – Multiple-Line Text Areas Example

Forms – Radio Buttons How can we make an easy solution were a user can select from one option only within a selection? Simple using a Radio Button, which is another input type. How can we make an easy solution were a user can select from one option only within a selection? Simple using a Radio Button, which is another input type. A Radio button list needs to have the same name to be part of a selection list A Radio button list needs to have the same name to be part of a selection list

Forms – Radio Buttons Eg: Eg:<form> Please select from the following: Selection 1 Selection 1 Selection 2 Selection 2 Selection 3 Selection 3 </form>

Forms – Radio Buttons

Forms – Check Boxes How can we make an easy solution were a user can select more than one option within a selection? Simple using a Check Box, which is another input type. How can we make an easy solution were a user can select more than one option within a selection? Simple using a Check Box, which is another input type. A Check Box needs to have the same name to be part of a selection list A Check Box needs to have the same name to be part of a selection list

Forms – Check Boxes Eg: Eg:<form> Please select from the following: Selection 1 Selection 1 Selection 2 Selection 2 Selection 3 Selection 3 </form>

Forms – Check Boxes

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

Forms – Select Menus Eg: Eg:<form> Please select a colour: blue blue red red pink pink white white </select></form>

Forms – Select Menus

Eg: Eg:<form> Please select a colour: blue blue red red pink pink white white </select></form>

Forms – Select Menus

Forms – The Possibilities Forms have endless possibilities which are detailed on w3schools: Forms have endless possibilities which are detailed on w3schools: –Submenus –File uploads –Hidden fields –Buttons –etc

Forms – Submenus Monday morning Monday morning Monday afternoon Monday afternoon </optgroup> Tuesday morning Tuesday morning Tuesday afternoon Tuesday afternoon </optgroup></select>