Si alguna vez ha utilizado formularios de Google, es posible que se haya preguntado cómo funciona. Cómo un usuario final puede crear un formulario allí de forma dinámica. Si alguna vez se le ocurrieron estas preguntas, este artículo puede ayudarlo.
Requisito previo:
- Básico de HTML y CSS
- Básico de JQuery
El complemento que vamos a utilizar aquí es dform. El complemento jQuery.dForm genera marcado HTML a partir de objetos JavaScript y JSON para formularios HTML.
¿Qué puedes hacer con el complemento dform?
- Naturalmente, puede generar marcado mejorado con JavaScript con sus propias extensiones y tipos personalizados.
- Puede usar JSON y JavaScript en lugar del marcado HTML.
- Es una manera fácil de incluir elementos de la interfaz de usuario de JQuery.
- Forme andamios a partir de objetos comerciales de su marco del lado del servidor.
- Para obtener más detalles, puede consultar aquí: Haga clic aquí
¿Cómo usar este complemento?
- Cree un archivo vacío, asígnele el nombre index.js para usarlo en nuestro archivo HTML.
- Haga clic aquí y copie el texto completo, péguelo en index.js.
- Guarde index.js.
- El complemento está listo para usar.
Acercarse:
- Usaremos clasificadores de tipo para agregar campos de entrada de formulario.
- Consulte myFunction1 y myFunction2 en el código para los clasificadores usados y sus atributos. Todos y cada uno de los atributos podrían usarse de la misma manera.
- Tipos de Clasificadores: Todos los clasificadores de tipo se envían en la función en formato JSON. Aquí hay algunos clasificadores de tipo:
| Escribe | Formato JSON | Descripción |
| texto | {«teclee el texto»} | Crea un campo de entrada de texto |
| número | {«teclea un número»} | Crea un campo de entrada de número HTML 5 |
| clave | {«escriba contraseña»} | Crea un campo de entrada de contraseña |
| envase |
{“tipo”: “contenedor”} {“tipo”: “div”} |
Crea un contenedor <div> |
| oculto | {“tipo”: “oculto”} | Crea un elemento de entrada oculto |
| expediente | {“tipo”: “archivo”} | Crear un campo de carga de archivos |
| boton de radio | {“tipo”: “radio”} | Crea un botón de opción |
| múltiples botones de opción | {“tipo”: “botones de radio”} | Crea un grupo de radiobuttons. (Usado con atributos de opción en JSON) |
| caja | {“tipo”: “casilla de verificación”} | Crea una casilla de verificación |
| casillas de verificación | {“tipo”: “casillas de verificación”} | Crea un grupo de casillas de verificación. (Usado con atributos de opción en JSON) |
| URL | {“tipo”: “url”} | Crea un campo de entrada de URL HTML 5 |
| teléfono | {“tipo”: “tel”} | Crea un campo de entrada de número de teléfono HTML 5 |
| {“tipo”: “correo electrónico”} | Crea un campo de entrada de correo electrónico HTML 5 | |
| Reiniciar | {“tipo”: “restablecer”} | Crea un elemento de entrada de botón de reinicio |
| enviar | {“escribir”: “enviar”} | Crea un elemento de entrada de botón de envío. |
Ejemplo: Aquí está el ejemplo básico para mostrar cómo se puede utilizar.
HTML
<!DOCTYPE html>
<html>
<body>
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<!-- Including index.js that we
had just created -->
<script type="text/javascript"
src="index.js">
</script>
<script>
$(document).ready(function () {
// Defining myFunction1
$.fn.myFunction1 = function () {
$("#myform").dform({
"html": [{
// Other attributes
"name": "username",
"id": "txt-username",
"caption": "username",
// Type Classifier
"type": "text",
"placeholder":
"E.g. user@example.com"
},
{ "type": "br" }
]
});
}
$(".call-btn-text").click(function () {
// Calling myFunction1 on click
$.fn.myFunction1();
});
});
$(document).ready(function () {
// Defining myFunction2
$.fn.myFunction2 = function () {
$("#myform").dform({
"html": [{
// Other attributes
"name": "PhoneNumber",
"id": "num_phone",
"caption": "Phone Number",
// Type Classifier
"type": "number",
"placeholder": "E.g. 0123456789"
},
{ "type": "br" }
]
});
}
$(".call-btn-number").click(function () {
// Calling myFunction2 on click
$.fn.myFunction2();
});
});
</script>
<form>
<input type="button" class="call-btn-text"
value=" Click me to input text">
<br>
<input type="button" value=
"Click me to input number"
class="call-btn-number">
<br>
</form>
<form id="myform"></form>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Cuando carga la página
Después de hacer clic en el primer botón:
Después de hacer clic en el primer botón
Después de hacer clic en el segundo botón:
Después de hacer clic en el segundo botón
Publicación traducida automáticamente
Artículo escrito por ayushsaxena77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA