¿Existe un estándar para el código de formulario?

Los formularios solo de Ajax son una pesadilla de accesibilidad, siempre usan un formulario HTML estándar en funcionamiento como línea de base, y construyen la capacidad de respuesta de ajax además de eso.
La investigación muestra que las personas son buenas para escanear verticalmente a través de un formulario, con cada etiqueta de campo directamente encima del campo del formulario.
Así que he simplificado mucho los formularios que construyo con los años. Si bien intentaba empaquetar tantos campos como sea posible ‘por encima del pliegue’, sé que utilizo un enfoque más lineal, lo que permite a las personas completar fácilmente el formulario de arriba hacia abajo.
Siempre que tengo la oportunidad, también trato de minimizar la cantidad de campos de formulario tanto como sea posible. Solo solicite lo que realmente necesita y solicite datos adicionales cuando lo necesite.

Utilice siempre el conjunto de campos, la leyenda, la etiqueta donde corresponda. Más allá de eso, casi todo vale (sí, incluso tablas), me gusta usar listas de definición con dt alrededor de la etiqueta y dd alrededor de la entrada.

Para la interactividad, se puede usar un elemento de la lista (ordenado o no) para agrupar pares de etiquetas / entradas.

http://www.webstandards.org/lear

De hecho, evito usar formularios y en su lugar uso ajax.

Registrarse

Nombre

Apellido

Correo electrónico

Contraseña



Términos y condiciones

Al utilizar este sitio web, acepta no emprender acciones legales contra Localo, los empleados de Localo o los usuarios de Localo, por cualquier motivo
en absoluto, en cualquier momento, para siempre.

Localo tiene el derecho de cambiar cualquier cosa en cualquier momento de la forma que desee. Utilice este servicio bajo su propio riesgo.

Lo leí y acepto.
Registrarme.

/ ** CSS ** /

.index .inputname {font-size: 10px; clear: both; margin: 5px 0 0 0;}

.index input {clear: both; float: left; padding: 5px; background: # f6f6f6; border: 1px solid #cacaca; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margen: 0px 0 5px 0; ancho: 200px; color: # 9f9f9f;}

botón de índice {borrar: ambos; flotante: izquierda; margen: 5px 0 0 0; ancho: 200px;}

// Signupsubmit ()
function signupsubmit () {$ ('. inputup input [name = "' + name + '"]'). next (). focus ();}

// PRESIONE ENTER EN LAS ENTRADAS
$ ('. entrada de registro'). pulsación de tecla (función (e) {nombre = $ (este) .attr ('nombre'); if (e.which == 10 || e.which == 13) {signupsubmit ( nombre);}});

// formulario de registro
$ ('. botón de cuadro de términos'). clic (function ()
{
var firstname = $ ('. signup input [name = "firstname"]'). val ();
var lastname = $ ('. signup input [name = "lastname"]'). val ();
correo electrónico var = $ ('. entrada de registro [nombre = "correo electrónico"]'). val ();
var contraseña = $ ('. entrada de registro [nombre = "contraseña"]'). val ();
var repeatpassword = contraseña;
var country = $ ('div [name = "country"] seleccione la opción: selected'). val ();
var estado = $ ('div [nombre = "estado"] seleccione la opción: seleccionado'). val ();
var town = $ ('div [name = "town"] seleccione la opción: selected'). val ();
suburbio var = $ ('div [nombre = "suburbio"] opción de selección: seleccionado'). val ();
signupstring = "bueno";
if (firstname == "") {$ ('. inputup input [name = "firstname"]'). css ('background', '# f4e6e6'); signupstring = "Complete todos los cuadros";}
if (lastname == "") {$ ('. inputup input [name = "lastname"]'). css ('background', '# f4e6e6'); signupstring = "Complete todos los cuadros";}
if (email == "") {$ ('. input input [name = "email"]'). css ('background', '# f4e6e6'); signupstring = "Complete todos los cuadros";}
if (password == "") {$ ('. input input [name = "password"]'). css ('background', '# f4e6e6'); signupstring = "Complete todos los cuadros";}
if (country == "Choose a country") {$ ('div [name = "country"] select'). css ('background', '# f4e6e6'); signupstring = "Complete todos los cuadros"; }
if (state == "Choose a state") {$ ('div [name = "state"] select'). css ('background', '# f4e6e6'); signupstring = "Complete todos los cuadros"; }
if (town == "Choose a town") {$ ('div [name = "town"] select'). css ('background', '# f4e6e6'); signupstring = "Complete todos los cuadros"; }

if (signupstring == "bueno")
{
if (contraseña == contraseña repetida)
{
$ ('. signupchecker'). load ("/ common / signup / signupscript.php", {nombre: nombre, apellido: apellido, correo electrónico: correo electrónico, contraseña: contraseña, país: país, estado: estado, ciudad: ciudad, suburbio: suburbio});
}
más
{
signupstring = "Debes escribir la misma contraseña dos veces para asegurarte de que la escribiste correctamente.";
}
}
más
{
$ ('. signupchecker'). html (cadena de registro);
}
});