Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Creating an Account</title>
    <link rel="stylesheet" href="css/form.css" />
</head>
<body>
<div id="wrapper">
    <h1>Account erstellen</h1>

    <form method="post" action="save_account.php" enctype="multipart/form-data">
        <!-- START ACCOUNT FIELDS -->
        <fieldset>
            <h2 class="account">Account</h2>
            <ul>
                <li>
                    <label for="first_name">Vorname:</label>
                    <input type="text" id="first_name" name="first_name" class="large"
                           required="required" placeholder="Enter your first name" />
                </li>
                <li>
                    <label for="last_name">Nachname:</label>
                    <input type="text" id="last_name" name="last_name" class="large" />
                </li>
                <li>
                    <label for="email">E-Mail:</label>
                    <input type="email" id="email" name="email" class="large" />
                </li>
                <li>
                    <label for="password">Passwort:</label>
                    <input type="password" id="password" name="password" />
                </li>
                <li>
                    <label for="password">Passwort erneut eingeben:</label>
                    <input type="password" id="password2" name="password2" />
                </li>
            </ul>
        </fieldset>
        <!-- end account -->

        <!-- START ADDRESS FIELDS -->
        <fieldset>
            <h2 class="address">Adresse</h2>
            <ul>
              <li>
                    <label for="phone">Telefon:</label>
                    <input type="tel" id="phone" name="phone" class="large"
                           placeholder="xxx-xxx-xxxx" pattern="\d{3}-\d{3}-\d{4}" />
                </li>
                <li>
                    <label for="street_address">Straße:</label>
                    <input type="text" id="street_address" name="street_address" class="large" />
                </li>
                <li>
                    <label for="city">Stadt:</label>
                    <input type="text" id="city" name="city" class="large" />
                </li>
                <li>
                    <label for="state">Bundesland:</label>
                    <select id="state" name="state">
                        <option value="AL">Berlin-Brandenburg</option>
                        <option value="AK">Hamburg</option>
                        <option value="CA">Baden-Würrtemberg</option>
                    </select>
                </li>
                <li>
                    <label for="zip_code">PLZ:</label>
                    <input type="text" id="zip_code" name="zip_code" class="small" />
                </li>
            </ul>
        </fieldset>
        <!-- end address -->

        <!-- START PUBLIC PROFILE FIELDS -->
        <fieldset>
            <h2 class="public-profile">Öffentliches Profil</h2>
            <ul>
                <li>
                    <label for="picture">Foto:</label>
                    <input type="file" id="picture" name="picture" />
                    <p class="instructions">Maximum size of 700k. JPG, GIF, PNG.</p>
                </li>
                <li>
                    <label for="screen_name">Benutzername:</label>
                    <input type="text" id="screen_name" name="screen_name" class="medium" />
                </li>
                <li>
                    <label for="web_site">Web:</label>
                    <input type="url" id="web_site" name="web_site" class="large" />
                    <p class="instructions">Have a homepage or a blog? Put the address here.</p>
                </li>
                <li>
                    <label for="bio">Biografie:</label>
                    <textarea id="bio" name="bio" rows="8" cols="50"></textarea>
                </li>
                <li>
                    <label>Geschlecht:</label>
                    <fieldset class="radios">
                    <ul>
                        <li>
                            <input type="radio" id="gender_male" name="gender" value="male" />
                            <label for="gender_male">männlich</label>
                        </li>
                        <li>
                            <input type="radio" id="gender_female" name="gender" value="female" />
                            <label for="gender_female">weiblich</label>
                        </li>
                    </ul>
                    </fieldset>
                </li>
            </ul>
        </fieldset>
        <!-- end public profile -->

        <!-- START EMAILS FIELDS -->
        <fieldset>
            <h2 class="emails">E-Mails</h2>
            <ul class="checkboxes">
                <li>
                    <input type="checkbox" id="email_ok_msg_from_users" name="email_signup[]" value="user_emails" />
                    <label for="email_ok_msg_from_users">Sie dürfen mir gerne Nachrichten von anderen Usern mailen.</label>
                </li>
                <li>
                    <input type="checkbox" id="email_ok_occasional_updates" name="email_signup[]" value="occasional_updates" />
                    <label for="email_ok_occasional_updates">Sie dürfen mir gelegntlich Werbung zu weiteren Produkten mailen.</label>
                </li>
            </ul>
        </fieldset>
        <!-- end emails -->

        <fieldset>
           <input type="reset" class="create_profile" value="Alle Eingaben zurücksetzen" />
            <input type="submit" class="create_profile" value="Account erstellen" />
        </fieldset>
    </form>
</div>
</body>
</html>