Html Forms

What are some examples of forms you see on websites?

• Comments
• Email
• Shopping

Inputs

Inputs

Input Field Types

• Checkbox
• Button
• Range
• Week
• Tel
• Color
• Date
• Textarea

And more

Try out these different types on jsfiddle/jsbin

Input Attributes

• Type
• Autofocus
• Name
• Value
• Placeholder
• Required
• Pattern (ex: [A-Za-z]{3})
• Readonly

Fieldset

The fieldset element is a convenient way to create groups of widgets that share the same purpose.

 
Fieldset label is a legend
    

        
        Small
    
    

        
        Medium
    

Dropdowns

    Pick a Category
    
        Shoes
        
            Fiction
            Non Fiction
        
    

How do we save the information?

Form container

• The action attibute defines the location (an URL) where the form's collected data should be sent.
• The method attribute defines which HTTP method to send the data with (it can be "get" or "post").

Exercise

    Name:
    

JsFiddle

Form Validation

Check out the example on the examples/form-validation.html

Walk-through

General Assembly Exercises

Firebase

Netlify

Reading

• How to structure a form
• Bootstrap css for forms

Pluralsight Courses

THE END

Thank you for your attention!