Elementos de formulario en Javascript
The first article in our series provides you with your very first experience of creating a web form, including designing a simple form, implementing it using the right HTML form controls and other HTML elements, adding some very simple styling via CSS, and describing how data is sent to a server.
Forms allow users to enter data, which is generally sent to a web server for processing and storage (see Sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).
The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.
Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and visually impaired users.Designing your formBefore starting to code, it’s always better to step back and take the time to think about your form. Designing a quick mockup will help you to define the right set of data you want to ask your user to enter. From a user experience (UX) point of view, it’s important to remember that the bigger your form, the more you risk frustrating people and losing users. Keep it simple and stay focused: ask only for the data you absolutely need.
Formulario de registro en Javascript
Crear un formulario simple y genérico es una tarea bastante fácil. El ejemplo siguiente le mostrará cómo crear un formulario de registro. Con simples retoques, puede cambiar los campos a lo que sea conveniente para usted.
En el código HTML, declare los campos que deben ser añadidos en el formulario. En este ejemplo, hay nombre, dirección, correo electrónico, contraseña, teléfono, curso. Estos actúan básicamente como encabezados, por lo que puedes darles el tamaño, estilo y peso que quieras. Para los cursos, crear un menú desplegable utilizando la etiqueta de opción. Luego tenemos 2 botones, uno para enviar el formulario y el otro para restablecer los campos.
Se ejecutará un script para validar si los datos del formulario se han introducido correctamente. Por ejemplo, al pulsar el botón de envío, si alguno de los campos está vacío, se avisará al usuario para que lo rellene. También puede utilizarse para comprobar si el número de teléfono está formado por dígitos o si la dirección de correo electrónico tiene el dominio y el signo @ correctos. Si no hay problemas con ninguno de los campos, el script devolverá un valor booleano de true.
Validación de formularios en Javascript
Tenemos un bootcamp de desarrollo web, y al final de cada bootcamp, hay un proyecto que nuestros estudiantes deben implementar. Ellos eligen un proyecto propio. Pero una pregunta sigue siendo la misma, cómo puedo añadir un formulario de contacto. Después de todo, todos tienen el conocimiento para construirlo, pero aún así, tener un ejemplo hace que todo sea más fácil. Así que, aquí vamos.
Puedes ver que también hemos puesto el atributo onsubmit a la etiqueta del formulario. Usamos el evento onsubmit para devolver false. En resumen, esto significa que el formulario no se redirigirá a otra página (o no se recargará). Hacemos esto para controlar lo que ocurrirá cuando pulsemos el botón.
Ahora empezamos a añadir campos de entrada. En primer lugar, añadiremos un campo de entrada con type=”text” y estableceremos el atributo id al campo lastName. Añade unas cuantas etiquetas br al final para hacer algo de espacio (podrías hacer el espaciado usando CSS, pero esta vez usaremos la etiqueta br).
¿Qué es un atributo placeholder? El marcador de posición es un atributo para la descripción del campo de entrada, el texto que es visible cuando el campo de entrada está vacío. En nuestro caso introduciremos el valor “Introduzca su apellido”.
Javascript crear formulario y enviar
Cuando envías un formulario web, el navegador busca el atributo ‘action’ de la etiqueta del formulario. Por ejemplo, en el ejemplo de código de formulario HTML anterior, el atributo “action” apunta a un script ubicado en “/cgi-bin/formmail.pl”. El navegador web envía los datos de envío del formulario al script mencionado en el atributo “action”.
El script de acción en el servidor puede ser personalizado o puede ser uno ya hecho. Hay scripts ya hechos que pueden enviar los envíos de formularios a su dirección de correo electrónico. Consulte la página de scripts de correo de formularios. Para ver ejemplos de cómo guardar los envíos de formularios en una base de datos, consulte la página de scripts de procesamiento de formularios.
