Formulario Basico con HTML

En esta entrada aprenderemos paso a paso a crear un Formulario básico, teniendo en cuenta algunos de los objetos de formularios que hemos venido enseñando en este Blog.

Creación del formulario:

Código HTML:

primero creamos las etiquetas <form> y </form> que contendrán todos los Objetos de nuestro formulario.

Creación delos campos de Texto:

Código HTML:

Resultado:

Crearemos solo 3 campos de texto, si ustedes desean pueden aumentar mas campos de texto según la necesidad que tengan.

Creamos casillas de verificación:

Código HTML:

Resultado:

Colocamos casillas de verificación para elegir el sexo de la persona.

Crearemos un menú de selección:

Código HTML:

Resultado:

Como observamos en el resultado creamos un menú de opciones el cual contiene un listado de países, es muy útil usar este tipo de menús debido a que nos permiten añadir diferentes opciones a elegir, pero nos consume muy poco espacio..

Para terminar crearemos Botones de enviar y resetear:

Código HTML:

<label>Nombre:</label><input type="text"><br><br>
               <label>Apellido:</label><input type="text"><br><br>
               <label>Telefono:</label><input type="text"> <br><br>

<label>Sexo: </label>
         <label>Maculino</label><input type="radio" name="sexo">
         <label>Femenino</label><input type="radio" name="sexo"><br><br>

<label>Pais:</label>
               <select name="menu">
      
                   <option> Peru</option>               
                   <option>Argentina</option>
                   <option>Chile</option>
                   
                   <option> Bolivia</option>               
                   <option>Ecuador</option>
                   <option>venezuela</option> 
                </select><br><br>

</form>
       </body>

</html>

Resultado:

Ahora aplicaremos etiquetas y atributo que nos permitirán dar un mejor aspecto a nuestro formulario.

Código HTML:

<fieldset>
 
                  <legend align="center">Formulario</legend><br />
        
            <center>

<label>Nombre:</label><input type="text"><br><br>
               <label>Apellido:</label><input type="text"><br><br>
               <label>Telefono:</label><input type="text"> <br><br>

<label>Sexo: </label>
          <label>Maculino</label><input type="radio" name="sexo">
          <label>Femenino</label><input type="radio" name="sexo"><br><br>

</html>

Resultado:

Si observamos el código se notara que agregamos las etiquetas <fieldset> y </fieldset> , las cuales crear una caja en donde se encuentra nuestro Formulario ademas creamos las etiquetas <legend> y </legend>, que permiten poner un Nombre o titulo a nuestro comentario, así como se nota en el resultado.

OJO: Existen diversos atributos de los objetos que omitimos en este Tutorial, debido a que solo creamos un formulario simple y solo visible ya que no ejecutara ninguna operación de procesamiento, en Tutoriales posteriores, aprenderemos como procesar la información que insertamos en nuestros formularios. Espero su comprensión.

Cualquier duda o Aporte Hacerlo por comentarios. Gracias por su Tiempo!.

Formulario Basico con HTML

Creación del formulario:

Creación delos campos de Texto:

Creamos casillas de verificación:

Crearemos un menú de selección:

Para terminar crearemos Botones de enviar y resetear:

COMUNIDAD NEYTUTORIALES:

0 comentarios:

Artículos más leídos