====== Web Development Lesson 2 - Lists ====== ===== Checklists ===== ==== Setup ==== * Continue using the 'lists.html' and 'style.css' files you have been working on in Visual Studio Code. * [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/en.php|lists.html]] * [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/style.php|style.css]] ==== Input Checkbox ==== * Create a basic unordered list at the end of your existing html code (just before the tag) * Fill it with items from a shopping list or a to-do list.

      Checklist
      
        100g flour
        2 eggs
        300ml milk

* So far this is like any other list we've created. * Now we'll add some checkboxes inside the

tag, but in front of the text.

100g flour


        2 eggs
        300ml milk

* There are many types of inputs (text, radio selectors, buttons etc) so we need to define which type we want with type="checkbox". * We also want to differentiate the items, so we name each using name="flour". * Open your code in Live Server to see the square in front of your text. Try clicking it to see that it's actually an interactive checkbox. * The bullets are now unnecessary, so let's remove them with CSS.

ul {
  list-style-type: none;
}

* list-style-type defines the type of bullet or number in front of your list items. 'none' removes bullets and numbers entirely. [[en:web_development:lists:menus|Next: Menus]]