Lists, buttons, and your first form

1. What is this?

A list groups related items. <ul> is an unordered (bulleted) list and each item is an <li>. A form collects user input: <form> wraps fields like <input> and a <button> submits them. The type attribute on an input decides what it accepts, e.g. type="text" or type="email".

2. Why do we use it?

Menus are lists. Sign-up pages, search boxes, and checkouts are forms. These two patterns cover a large share of real pages.

3. Syntax breakdown

• <ul><li>First</li><li>Second</li></ul>

  ul = the list container. Each li = one item. Browsers render bullets.

• <input type="text" placeholder="Your name">

  input is a field. type=text means free text. placeholder shows a grey hint.

• <button type="submit">Send</button>

  A clickable button. Inside a form, type=submit sends the form.

5. Common mistakes

• Putting <li> items outside any <ul> or <ol> — items must live inside a list container.
• Using <button> without type inside a form and being surprised it submits.
• Forgetting <label> text for inputs, so users do not know what to type.

Practice task

Add a third list item and an email field (type="email") with placeholder "Email address".

Press Run to see output.

Mini quiz

3 questions. Answer, then check.

1. 1. Which tag marks one item in a list?

   <li><item><list>

2. 2. What does type="email" do on an input?

   Accepts and validates email addressesSends the emailHides the text

3. 3. What wraps the fields a user fills in?

   <form><ul><img>