Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Emmet, Forms</title>
- <!-- Internal CSS -->
- <style>
- input {
- margin-bottom: 20px;
- }
- span {
- display: block;
- margin-top: 50px;
- font-weight: bold;
- }
- div, .author {
- background-color: lightcyan;
- padding: 5px;
- }
- </style>
- </head>
- <body>
- <!-- Emmet -->
- <h1>Emmet</h1>
- <a href="https://emmet.io/">Emmet documentation</a>
- <p>F2 - change both tags</p>
- <p>Ctrl + Shift + p - Wrap Emmet</p>
- <!-- To use Emmet simply start to typing the emmet shortcuts (see the examples bellow) and then hit the enter. -->
- <!-- Create div with ID named "example". -->
- <span style="margin-top: 50px;">div#example</span>
- <div id="example"></div>
- <!-- Create div with class named "book". -->
- <span>div.book</span>
- <div class="book"></div>
- <!-- Create paragraph with class named "author". -->
- <span>p.author</span>
- <p class="author"></p>
- <!-- Create paragraph with inserted text "dummy text". -->
- <span>p{dummy text}</span>
- <p>dummy text</p>
- <!-- Create parent "ul" with five children "li", and child "a" with text "Item". -->
- <span>ul>li*5>a{Item}</span>
- <ul>
- <li><a href="">Item</a></li>
- <li><a href="">Item</a></li>
- <li><a href="">Item</a></li>
- <li><a href="">Item</a></li>
- <li><a href="">Item</a></li>
- </ul>
- <!-- Create parent "ul" with two children "li", and child "a" with text "Item" and number starting from 1. -->
- <span>ul>li*2>a{Item$}</span>
- <ul>
- <li><a href="">Item1</a></li>
- <li><a href="">Item2</a></li>
- </ul>
- <!-- Create a div with ID named "navigation" and parent "ul" with two children "li", and child "a" with text "Item" and number starting from 1. -->
- <span>div#navigation>ul>li*2>a{Item$}</span>
- <div id="navigation">
- <ul>
- <li><a href="">Item1</a></li>
- <li><a href="">Item2</a></li>
- </ul>
- </div>
- <br>
- <hr>
- <br>
- <!-- Forms -->
- <h1>Form</h1>
- <!-- HTML form is used to collect user input. -->
- <!-- User input is most often sent to a server for processing. -->
- <form>
- <label for="example">This is a label</label><br>
- <!-- This is a input field of type of text. -->
- <!-- The label and input are connected together by "for" and "name". -->
- <input type="text" name="example" placeholder="This is a input filed."><br>
- <!-- Examples of input types. -->
- <label for="">Button</label><br>
- <input type="button" value="Button"><br>
- <label for="">Checkbox</label><br>
- <input type="checkbox" name="" id=""><br>
- <label for="">Date</label><br>
- <input type="date" name="" id=""><br>
- <label for="">Date Time</label><br>
- <input type="datetime-local" name="" id=""><br>
- <label for="">Email</label><br>
- <input type="email" name="" id=""><br>
- <label for="">File</label><br>
- <input type="file" name="" id=""><br>
- <label for="">Hidden</label><br>
- <input type="hidden" name="" id=""><br>
- <label for="">Image</label><br>
- <input type="image" name="" id=""><br>
- <label for="">Month</label><br>
- <input type="month" name="" id=""><br>
- <label for="">Number</label><br>
- <input type="number" name="" id=""><br>
- <label for="">Password</label><br>
- <input type="password" name="" id=""><br>
- <label for="">Radio</label><br>
- <input type="radio" name="" id=""><br>
- <label for="">Range</label><br>
- <input type="range" name="" id=""><br>
- <label for="">Reset</label><br>
- <input type="reset" name="" id=""><br>
- <label for="">Search</label><br>
- <input type="search" name="" id=""><br>
- <label for="">Submit</label><br>
- <input type="submit" name="" id=""><br>
- <label for="">Telephone</label><br>
- <input type="tel" name="" id=""><br>
- <label for="">Text</label><br>
- <input type="text" name="" id=""><br>
- <label for="">Time</label><br>
- <input type="time" name="" id=""><br>
- <label for="">URL</label><br>
- <input type="url" name="" id=""><br>
- <label for="">Week</label><br>
- <input type="week" name="" id=""><br>
- </body>
- </html>
Add Comment
Please, Sign In to add comment