Jump to content

how to style a Register/sign in form?


moshh

Recommended Posts

hello, can you help me to style my registration form?

i can't organize my form to locate all input boxes and other things like radios and selets and ... exactly under each other vertically in a line, what do i most?

Edited by moshh
Link to comment
Share on other sites

here is my codes:

html:

Quote

<!doctype html>
<html>

    <head>

        <meta charset="UTF-8">
        <title>Register page</title>
        
        <link rel="stylesheet" href="reg.css">
        <link rel="stylesheet" href="normalize.css">
    </head>

    <body>
        
        <form id="enregister">
            
            <fieldset id="pinf">
                <legend>Personal Information</legend>
                
                <div>
                    <div id="namea">Name:</div>
                    <div id="nameb"><input type="text" name="txtname" maxlength="45" size="30" class="name"></div>
                </div>
                
                <div>
                    <div id="famia">Family Name:</div>
                    <div id="famib"><input type="text" name="txtfami" maxlength="60" size="30" class="fami"></div>
                </div>
                
                <div>
                    <div id="bda">Birthday:</div>
                    <div id="bdb">
                    <input type="datetime" name="year" maxlength="4" size="4" class="bdy"> /
                    <input type="datetime" name="month" maxlength="2" size="2" class="bdm"> /
                    <input type="datetime" name="day" maxlength="2" size="2" class="bdd">
                    </div>
                </div>
                
                <div>
                    <div id="bca">Birth City:</div>
                    <div id="bcb">
                        <select name="bidacity" class="bcity">
                            <optgroup label="Tehran">
                                <option value="Tehran">Tehran</option>
                                <option value="Damavand">Damavand</option>
                                <option value="Lavasan">Lavasan</option>
                                <option value="shahreRey">ShahreRey</option>
                                <option value="shahriar">Shahriar</option>
                                <option value="Varamin">Varamin</option>
                            </optgroup>
                            <optgroup label="Fars">
                                <option value="Shiraz">Shiraz</option>
                                <option value="Sepidan">Sepidan</option>
                                <option value="Kazeron">Kazeron</option>
                                <option value="Abadeh">Abade</option>
                            </optgroup>
                            <optgroup label="Yazd">
                                <option value="Yazd">Yazd</option>
                                <option value="Bafgh">Bafgh</option>
                                <option value="Ardakan">Ardakan</option>
                                <option value="Meybod">Meybod</option>
                            </optgroup>
                            <optgroup label="Semnan">
                                <option value="Semnan">Semnan</option>
                                <option value="Garmsar">Garmsar</option>
                                <option value="Miami">Miami</option>
                            </optgroup>
                            <optgroup label="...">
                                <option value="...">...</option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                
                <div>
                    <div id="gensa">Gender:</div>
                    <div id="gensb">
                    <label><input type="radio" name="gens" value="male" class="male"> Male </label>
                    <label><input type="radio" name="gens" value="female" class="female"> Female </label>
                    </div>
                </div>
                
                <div>
                    <div id="pica">Your Photo:</div>
                    <div id="picb"><input type="file" name="personal pic" size="20" class="pic"></div>
                </div>
            </fieldset>
            
            <fieldset id="uinf">
                <legend>User Information</legend>
                
                <div>
                    <div id="emaila">Email:</div>
                    <div id="emailb"><input type="text" name="email" maxlength="50" size="30" class="email"></div>
                </div>
                
                <div>
                    <div id="una">Username:</div>
                    <div id="unb"><input type="text" name="username" maxlength="45" size="30" class="un"></div>
                </div>
                
                <div>
                    <div id="passa">Password:</div>
                    <div id="passb"><input type="password" name="password" maxlength="45" size="30" class="pass"></div>
                </div>
                
                <div>
                    <div id="cpassa">Password Confirm:</div>
                    <div id="cpassb"><input type="password" name="password" maxlength="45" size="30" class="cpass"></div>
                </div>
            </fieldset>
            
                <div>
                    <div id="submit">
                    <button type="submit" value="register" class="ensub">Register</button>
                    </div>
                    <div id="reset">
                    <button type="reset" value="erease" class="enres">Erease</button>
                    </div>
                </div>
        </form>    
    </body>
</html>

php:

Quote

#enregister {
    font-family: 'eng';
}

@font-face {
    font-family:'eng';
    src: url(fonts/eng.eot), url(fonts/eng.ttf);
}

#namea {
     display: inline;
}
#nameb {
     display: inline;
}
#nameb .name {
    margin-top: 15px;
}

#famia {
     display: inline;    
}
#famib {
     display: inline;
}
#famib .fami{
    margin-top: 15px;
}

#bda {
     display: inline;
}
#bdb {
     display: inline;
}
#bdb .bdy,.bdm,.bdd {
    margin-top: 15px;
}

#bca {
     display: inline;
}
#bcb {
     display: inline;
}
#bcb .bcity {
    margin-top: 15px;
}

#gensa {
     display: inline;
}
#gensb {
     display: inline;
}
#gensb .male,.female {
    margin-top: 15px;
}

#pica {
     display: inline;
}
#picb {
     display: inline;
}
#picb .pic {
    margin-top: 15px;
}

#emaila {
     display: inline;
}
#emailb {
     display: inline;
}
#emailb .email {
    margin-top: 15px;
}

#una {
     display: inline;
}
#unb {
     display: inline;
}
#unb .un {
    margin-top: 15px;
}

#passa {
     display: inline;
}
#passb {
     display: inline;
}
#passb .pass {
    margin-top: 15px;
}

#cpassa {
     display: inline;
}
#cpassb {
     display: inline;
}
#cpassb .cpass {
    margin-top: 15px;
}

#reset {
    display: inline;
}

#reset .enres {
    background-color: #333;
    color: #ffffff;
    width: 80px;
    height: 35px;
    margin: 20px 90px auto 30px;
    font-family: 'eng';
    font-size: 14px;
}

#submit {
    display: inline;
}

#submit .ensub {
    background-color: #333;
    color: #ffffff;
    width: 80px;
    height: 35px;
    margin:20px auto auto 90px;
    font-family: 'eng';
    font-size: 14px;
}

#pinf {
    width: 30%;
}

#uinf {
    width: 30%;
}

u see boxes are untidy, Can u help me?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...