Crear formulario en Dreamweaver

Los formularios sirven para que los usuarios o visitantes de la página envien un comentario o consulta al cliente.

Insertar el contenido

  1. Lo primero que se necesita para crear el formulario es colocar la etiqueta <form> que hace referencia al formulario. Entrar a la ventana de “Insertar” y cambiar la sección de común por la de formulario. Le damos clic a la palabra formulario.
  2. Dentro de este <form> se coloca el cursor y se insertan los campos.  Ingresar a la ventana de “Insertar” y presionar el botón campo de texto. En la siguiente ventana colocar el nombre del campo en la sección etiqueta. Verificar que en Estilo este seleccionada la opción “Adjuntar etiqueta de título utilizando el atributo ‘for’ “. Luego colocar aceptar. Repetir este paso cuantas veces sea necesario.
  3. Para crear un área de texto se presiona la opción área de texto de la sección de formularios.
  4. Para insertar un botón solo debe darle clic a la opción botón
  5. La apariencia del formulario va ser la siguiente:

    El código htm es el siguiente:
<form id=”form1″ name=”form1″ method=”post” action=””>
<p>
<label for=”textfield2″>Nombres</label>
<input name=”textfield” type=”text” id=”textfield2″ size=”40″ /></p>
 <p>
<label for=”textfield3″>E-mail</label>
<input name=”textfield2″ type=”text” id=”textfield3″ size=”40″ /></p>
<p><label for=”textfield4″>Celular</label>
<input name=”textfield3″ type=”text” id=”textfield4″ size=”40″ maxlength=”9″ /></p>
<p>
<label for=”textarea”>Consulta</label>
<textarea name=”textarea” cols=”45″ rows=”7″ id=”textarea”></textarea></p>
<p>
<input name=”button” type=”submit” id=”button” value=”Enviar” />
<input type=”reset” name=”button2″ id=”button2″ value=”Borrar” /></p>
</form>

Apariencia del formulario

  1. Para alinear los campos, crear el estilo para la etiqueta <label>. Colocar la opción block en display . Este cambio es importante para que la etiqueta tenga las propiedades de altura, ancho, margenes, etc.
  2. Luego en la categoría cuadro se modifica el ancho de la etiqueta, el float y los márgenes si fuera necesario.
    El código css es el siguiente:
label {
width: 80px;
display: block;
float: left;
margin-right: 10px;
}