Tutorial CSS : Colocar elementos de un formulario con CSS

Colocar los elementos de un formulario con CSS

Código HTML:

<html>

    <head>
        <title>Cursos gratis</title>
        <link rel="stylesheet" type="text/css" href="estilos.css" />
    </head>

    <body>

        <div id="divContenedor">

            <div id="divTitulo">ACCESO</div>

            <form id="form1" name="form1" action="#" method="post">
                <label id="lbl1" name="lbl1" for="txt1">Nombre:</label>-
                <input id="txt1" name="txt1" type="text" value="Introduce el nombre..." />


                <label id="lbl2" name="lbl2" for="txt2">Apellidos:</label>
                <input id="txt2" name="txt2" type="text" value="Introduce los apellidos..." />

                <input type="submit" id="btnSubmit" name="btnSubmit" />
            </form>

        </div>

    </body>

</html>

Código CSS:

body {
    font-family:Arial;
    font-size:13px;
}

#divContenedor {
    position:relative;
    height:124px;
    width:340px;
    margin:0 auto;
    background-color:blue;
}

#divTitulo, #lbl1, #txt1, #lbl2, #txt2, #btnSubmit {
    position:absolute;
}

#divTitulo {
    height:16px;
    width:340px;
    color:yellow;
    text-align:center;
    font-weight:bold;
    background-color:red;
}

#lbl1, #lbl2 {
    width:70px;
    background-color:lightgray;
}

#txt1, #txt2 {
    width:200px;
    border:1px solid black;
}

#lbl1 {
    top:33px;
    left:30px;
}

#txt1 {
    top:30px;
    left:104px;
}

#lbl2 {
    top:63px;
    left:30px;
}

#txt2 {
    top:60px;
    left:104px;
}

#btnSubmit {
    width:110px;
    top:90px;
    left:120px;
    cursor:pointer;
}

Aquí puedes ver el resultado:

Formulario con CSS

Tutorial de CSS

Colocar los elementos de un formulario con CSS