Buscador


En todo Internet
En Uterra.Com

Contenidos


Uno de los problemas con los que el usuario de nuestra Web puede encontrarse, es que contenga formularios con gran número de campos. Una forma sencilla de hacerlos más llevaderos, es agrupar los campos por categorías. Así por ejemplo, podemos crear un grupo de campos que recoja los datos personales, otro que recoja los datos académicos, económicos, etc.

Y todo esto es muy fácil de hacer mediante las etiquetas fieldset y legend. Por supuesto, este código es perfectamente compatible con la aplicación de formatos mediante CSS.

<html>

<head>
<title>Agrupacion de campos en formularios.</title>
</head>

<body>

<h3 align="center">Cumplimente el formulario.</h3>

<div align="center">
    <table border="0" width="500" cellspacing="0" cellpadding="0" id="table1">
        <tr>
            <td>
            
                <form method="POST" action="--WEBBOT-SELF--">
                
                    <fieldset>
                    
                        <legend>
                            <b>Datos personales.</b>
                        </legend>
                      
                        <p>Nombre: <br />  
                        <input type="text" name="nombre" size="25"></p>  
                         
                        <p>E-Mail: <br />  
                        <input type="text" name="email" size="25"></p>
                        
                    </fieldset>
                    
                        <p>&nbsp;</p>
                    
                    <fieldset>
                    
                        <legend>
                            <b>Datos económicos.</b>
                        </legend>
                      
                        <p>Banco: <br />  
                        <input type="text" name="banco" size="25"></p>  
                         
                        <p>Nº de cuenta: <br />  
                        <input type="text" name="cuenta" size="25"></p>
                        
                    </fieldset>
                    
                    <p align="center"><input type="reset" value="Restablecer" name="B2">
                                    <input type="submit" value="Enviar" name="B1"></p>
                </form>
            
            </td>
        </tr>
    </table>
</div>

</body>

</html>