es:web_development:lists:checklists
This is an old revision of the document!
Table of Contents
Desarrollo Web Lección 2 - Listas
Checklists
Setup
- Continue using the 'lists.html' and 'style.css' files you have been working on in Visual Studio Code.
lists.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="lists.js"></script>
</head>
<body>
<h2>
Who Am I?
</h2>
<ol>
<li>Family Members
<ul>
<li>Father</li>
<li>Mother</li>
<li>Sister</li>
<li>Brother</li>
</ul>
</li>
<li>Hobbies
<ol>
<li>Music</li>
<li>Football</li>
<li>Cycling</li>
</ol>
</li>
<li>Favourite Bands
<ul>
<li>Shakira</li>
<li>Juanes</li>
</ul>
</li>
</ol>
</body>
</html>
style.css
ol {
color: blue;
}
ol ol {
font-weight: 700;
}
Input Checkbox
- Create a basic unordered list at the end of your existing html code (just before the
</body>tag) - Fill it with items from a shopping list or a to-do list.
<h2>Checklist</h2>
<ul>
<li>100g flour</li>
<li>2 eggs</li>
<li>300ml milk</li>
</ul>
- So far this is like any other list we've created.
- Now we'll add some checkboxes inside the
<li>tag, but in front of the text.
<li><input type="checkbox" name="flour">100g flour</li>
<li><input type="checkbox" name="eggs">2 eggs</li>
<li><input type="checkbox" name="milk">300ml milk</li>
- 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-typedefines the type of bullet or number in front of your list items. 'none' removes bullets and numbers entirely.
es/web_development/lists/checklists.1646253799.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
