Collecting Information from the User Form Elements

Why Use a Form? Collect info from user Example info: Contact info Choices for Products to Buy Survey results Quiz results

Elements of a Basic Form

Place a Form on Your Page Entire form will be surrounded by <form> tags All elements on your form placed between these tags Choose the name – should make sense for overall purpose of form We will add additional attributes later once we need to get the form actually working!

Text Turns this element into a text box Provides a name – so we can access information collected from this element later! Our code creates this – difficult for user to know what to type!

Now the user will know what we want! Text Now the user will know what we want!

Text Can set value in text box to a default Can be annoying for user Not typically done

Now What? Can add multiple textboxes to ask for multiple pieces of info User needs a way to send that info somewhere

Setting value of type attribute to “submit” creates a submit button. Will pick up automatic meaning once we code this form to actually work.

Alter Label on the Submit Button Adding a value will alter the text that appears on the submit button.

Reset Button Will clear (erase values inside) all form fields when pressed Helps user reset form completely

Prevent All Fields on Same Line You may use break tags between form elements

Will not allow the user to type more than 100 characters Formatting Makes it display enough room for 100 characters (the default is 20 characters) Will not allow the user to type more than 100 characters