HTML Forms

HTML Forms

How to build a form on your website

Why would you need a form?

Forms are a great way of getting information from users and reacting to it.

For example, taking someone's username and password to log in to your website!

Important Elements to start your Form.

• &

• (Empty tag)

• &

The importance of labels & attributes in forms.

• type

• id

• name

• placeholder

• etc

The power the attribute "type"

The attribute type has many uses in element.

Values:

1.Test

2.Password

3.Numbers

4.Etc!

The importance of understanding id

id is very important in HTML, this allows you to give an id your element. Meaning you can locate it!

id should always have unique value this way it knows what to link.

Name and placeholder

The purpose of a name is used to give a name that can be used for action on Javascript.

Placeholder is great for telling users what it is!

Live Demo Time!

Let's do a live demo! Which will break down what we see in this image

Multiple Choice

What HTML input type is used to create this password field?

• <input type="text">

• <input type="submit">

• <input type="password">

• <input type="radio">

Multiple Choice

What form elements are used in creating this text field?

• <select> and <option>

• <label> and <input>

• <textarea> and <input>

• <select> and <input>

Multiple Select

HTML form is used for/to

• Collect user input

• It is not a section of a document

• Contains password control only

• Users can enter data in specific fields

• to capture website visitors' information

Multiple Select

Which of the following paired correctly?

• <button> : it defines a clickable button.

• <fieldset> : it defines an HTML form to enter inputs by the user.

• <label> : it defines a label for an input element.

• <textarea> : it defines a caption for a <fieldset> element.

Multiple Choice

The _______ tag is used to create an HTML form for user input.

• <fieldset>

• <input>

• <form>

• <label>

HTML Tutorial: Learn HTML For Free | CodecademyMini Arrow Down IconCodecademy LogoArrow Chevron Down Filled IconArrow Chevron Down Filled IconArrow Chevron Down Filled IconSearch IconCodecademy LogoMenu IconTwitter IconFacebook IconInstagram IconYoutube Icon

You can open this webpage in a new tab.

Copy link

Open in new tab