JSFiddle

  • too much output - Avoiding common HTML5 output mistakes #1 is the latest revision

    showcases the most common mistake explaining the new output element.

    jQuery.webshims.polyfill('forms-ext');
  • form-4

    No-Library (pure JS), HTML, CSS, JavaScript

    <form action="send-form-to.php" method="post">
        <fieldset>
            <legend>Exempel på användning av optgroup</legend>
            <select>
                <optgroup label="dricka">
                    <option />vatten
                    <option />mjölk
                    <option />saft
                </optgroup>
                <optgroup label="äta">
                    <option />lax och potatis
                    <option />sallad
                </optgroup>
            </select>
        </fieldset>
        
        <fieldset>
            <legend>Fler exempel.</legend>
            
            <!-- knapp -->
            <p>
                en knapp: 
                <button name="button-1" value="1">Klicka</button>
            </p>
            
            <!-- datalist -->
            <datalist id="tree-type">
                <option value="ek"/>
                <option value="lönn" />
                <option value="rönn" />
                <option value="asp" />
            </datalist>
            
            <p>
                Välj ditt favoritträd ...</p></!--></!--></fieldset></form>
  • form-5-output #31 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    //oninput="product.value=factor-1.valueAsNumber * factor-2.valueAsNumber"
    //jQuery
    $(document).ready(function () {
        'use strict';
        console.log("test");
        $('#factor-1').on('input', function ...
  • form-3 #29 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <p>
        OBS! Använd webbläsaren Opera. Den har bra stöd för formulärelement i HTML5.
    </p>
    <form action="send-form-to.php" method="post">
        <!-- a variable an-id with the value "validation-id" sent with the form -->
        <input type="hidden" name="an-id" value="validation-id" />
    
        <fieldset>
            <legend>Välj språk. Option select.</legend>
    
            <select name="language">
                <option value="sv" />svenska
                <option value="en" selected="selected"/>engelska
                <option value="dk" />danska
                <option value="no" />norska ...</option></option></option></option></select></fieldset></!--></form>
  • form-2

    No-Library (pure JS), HTML, CSS, JavaScript

    <form action="send-form-to.php" method="post">
        <legend>
            <!-- a variable an-id with the value "validation-id" sent with the form -->
            <input type="hidden" name="an-id" value="validation-id" />
            <!--
            <fieldset>Option select</fieldset>
            -->
            <p>Välj språk.</p>
            <select name="language">
                <option value="sv" />svenska
                <option value="en" selected="selected"/>engelska
                <option value="dk" />danska
                <option value="no" />norska
            </select>
        </legend>
        <p>
            <input type="submit" name="submit" value="Skicka" />
        </p>
    </form>
  • form-1-2

    No-Library (pure JS), HTML, CSS, JavaScript

    <form action="send-form-to.php" method="post">
        <!-- login -->
        <fieldset>
            <legend>Login</legend>
            <p>
                <label for="id-user-name">Användarnamn</label>
                <input type="text" name="user-name" required id="id-user-name" />
            </p>
            <p>
                <label for="id-password">Lösenord</label>
                <input type="password" name="password" autocomplete="off" id="id-password"/>
            </p>
        </fieldset>
        <!-- kryssrutor -->
        <!-- valfritt antal kan väljas -->
        <fieldset>
            <legend>Kryssrutor</legend>
            <p>
                Välj de alternativ som passar bäst.
            </p>
            <p>
                <input type="checkbox" name="drinks" value="milk" />
                Jag gillar mjölk.
            </p>
            <p>
                <input type="checkbox" name="drinks" value="orange-juice" />
                Jag gillar apelsinjuice.
            </p>
            <p>
                <input type="checkbox" name="drinks" value="apple-juice" />
                Jag gillar äppeljuice.
            </p>
        </fieldset>
        <!-- radioknappar -->
        <!-- bara en kan väljas -->
        <fieldset>
            <legend>Radioknappar ...</legend></fieldset></!--></!--></!--></!--></!--></form>
  • form-1

    No-Library (pure JS), HTML, CSS, JavaScript

    <form action="send-form-to.php" method="post">
        <!-- login -->
        <p>
            <label>
                Användarnamn
                <input type="text" name="user-name" />
            </label>
        </p>
        <p>
            <label>
                Lösenord
                <input type="password" name="password" />
            </label>
        </p>
        <!-- textruta -->
        <p>
            Skriv en berättelse.
        </p>
    
        <textarea type="textarea" cols="40" rows="10" name="story" >
    Ta bort denna text och skriv berättelsen här.
        </textarea>
        <!-- kryssrutor -->
        <!-- valfritt antal kan väljas -->
        <p>
            Välj de alternativ som passar bäst.
        </p>
        <p>
            <input type="checkbox" name="drinks" value="milk" />
            Jag ...</p></!--></!--></!--></!--></form>
  • table-3

    No-Library (pure JS), HTML, CSS, JavaScript

    
    <table>
        <caption>Tabellens rubrik </caption>
        <thead>
            <tr>
                <th>
                    rubrik för kolumn 1
                </th>
                <th>
                    rubrik för kolumn 2
                </th>
                <th>
                    rubrik för kolumn 3
                </th>
                <th>
                    rubrik för kolumn 4
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                rad 1 ...</td></tr></table>
  • table-1 #2 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    No code. How about adding some?
  • ordlista #28 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <a href="http://htmldog.com/guides/html/intermediate/definitionlists/">
        http://htmldog.com/guides/html/intermediate/definitionlists/
    </a>
    <h1>Some random glossary thing</h1>
    <dl>
        <dt>HTML</dt>
        <dd>Abbreviation for HyperText Markup Language - a language used ...</dd></dl>