5 - 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Трета задача</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>

    <script>

        $(function() {
            $( "#datepicker" ).datepicker();
        });

        $(function() {
            $("#selectable").bind("mousedown", function(e) {
                e.metaKey = true;
            }).selectable();
        });
        $(function() {

            $('#save').click(function () {

                $('#dialog').attr('title', 'User Info').text('Name: '+$('#first-name').val()+'\n'
                        +'Surname: '+$('#last-name').val()+'\n'+'Password: '+$('#password').val()+
                        '\n'+' Date of Birth: '
                        +$('#datepicker').val()+'\n'+'Hobbies: '+$('selected#selectable').val()).dialog();
            });
        });
    </script>

    <style type="text/css">

          span{
               display: none;
               color: red;
           }

        label{
            display: inline-block;

            margin: 5px 0px 6px 0px;
            width: 80px;
        }
        input{
            margin: 4px;
            width: 150px;
        }
          #container1{
                position: relative;
            }
        #selectable .ui-selecting { background: #FECA40; }
        #selectable .ui-selected { background: #F39814; color: white; }
        #selectable { list-style-type: none; margin: 0; padding: 0; width: 98%; }
        #selectable li { margin: 3px; padding: 0.4em;}

        #save{

            margin-top: 15px;
            width: 33%;
        }


    </style>
</head>
<body>
        <form id="commentForm">
            <div id="container1" style="left: 35%">
            <label>Name:</label>
            <input type="text" id="first-name" placeholder="Name"> <span>Insert a name</span><br>
            <label>Surname:</label>
            <input type="text" id="last-name" placeholder="Surname"><span>Insert a surname</span> <br>
            <label>Password:</label>
            <input type="password" id="password" placeholder="Password"><span>Insert a password</span> <br>
            <label>DateOfBirth:</label>
            <input type="text" id="datepicker" placeholder="Date Of Birth"> <span>Insert a date</span><br> <br>
            </div>
            <div id="container2" style="width:300px; margin:0 auto;">
                <p>Select your hobbies</p>
                <ul id="selectable">
                    <li class="ui-widget-content" value="gaming">Gaming</li>
                    <li class="ui-widget-content" value="sports">Sports</li>
                    <li class="ui-widget-content" value="tv">Watching Tv</li>
                    <li class="ui-widget-content" value="sleeping">Sleeping</li>
                    <li class="ui-widget-content" value="hiking">Hiking</li>
                    <li class="ui-widget-content" value="skiing">Skiing</li>
                    <li class="ui-widget-content" value="dancing">Dancing</li>
                </ul>
                <input id="save" type="button" value="Add my Info"/>
                <div id="dialog"></div>
                </div>

        </form>
</body>
</html>