Forms
      Volver al inicio
      1. Centro de Ayuda Rock Content
      2. Ion
      3. Forms

      Biblioteca de formularios: diseño de formularios HTML personalizados dentro del estilo del tema

      ¿Te gustaría que tu formulario HTML personalizado recoja los estilos de los temas del Framework en tu ion console? Si es así, ¡sigue leyendo!

      Puedes estilizar tus formularios HTML personalizados para que se mezclen con tu tema al incluir todas las clases CSS específicas del formulario de ion dentro de tu código de formulario.

      Por ejemplo, para estilizar un cuadro de texto de entrada, agrega la clase "pf_text" al cuadro de texto de entrada como se muestra a continuación:

      ‹input type="text" id="first_name" name="first_name" class="pf_text" /›

       

      .pf_text es el tamaño estándar de un campo de texto (por defecto 130px de ancho).

      .pf_text_narrow es el tamaño estrecho de un campo de texto (por defecto 75px de ancho).

      .pf_text_wide es el tamaño ancho de un campo de texto (predeterminado 250px de ancho).

       

      NOTA: El ancho (y el estilo) de estos campos se pueden ajustar a nivel de tema o dentro de tu código de formulario HTML personalizado.

      Para el control del tema de las etiquetas de campo, agrega la clase "pf_label_text". Por ejemplo:

      ‹label class="pf_label_text"›First Name*‹/label› 

       

      Para controlar el tema del botón de envío, agrega la clase "pf_submit_button". Por ejemplo:

      ‹input type="submit" class="pf_submit_button" value"Register" /›

       

      Si estás utilizando texto de sugerencia en tu formulario, puede utilizar esta clase "pf_hint_text". Por ejemplo:

      ‹span class="pf_hint _text"›enter phone number with dashes xxx-xxx-xxxx‹/span›

       

      Ejemplo de formulario HTML personalizado (sin control de tema):

      ‹form›  
      ‹label class="pf_label_text"›Name:‹/label›
      ‹input type="text" name="lbform_name" id="lbform_name" class="pf_text" value="" /›

      ‹label class="pf_label_text"›E-mail:‹/label›
      ‹input type="text" name="mail" id="lbform_mail" class="pf_text" value="" /›

      ‹label class="pf_label_text"›Comment:‹/label›
      ‹input type="text" name="comment" id="lbform_comment" class="pf_text" value="" /›
      ‹span class="pf_hint_text"›Up to 100 characters‹/span› 

      ‹input type="submit" class="pf_submit_button" value="Send"›  
      ‹/form›

       

      Referencia completa de las clases CSS específicas del formulario.

      .pf_form_table: clase CSS para tabla de formulario

      .pf_field_row: clase CSS para filas de campo

      .pf_field_row_bad: clase CSS para filas de campos incorrectos

      .pf_label_cell: clase CSS para celdas de etiqueta

      .pf_label_cell_bad: clase CSS para celdas de etiqueta incorrecta

      .pf_label_text: clase CSS para texto de etiqueta

      .pf_label_text_bad: clase CSS para texto de etiqueta incorrecta

      .pf_field_cell: clase CSS para celdas de campo

      .pf_field_cell_bad: clase CSS para celdas de campo incorrectas

      .pf_hint_cell: clase CSS para celdas de sugerencia

      .pf_hint_text: clase CSS para texto de sugerencia

      .pf_hint_text_bad: clase CSS para texto de sugerencia incorrecto

      .pf_hr_cell: clase CSS para la celda separadora ‹hr›

      .pf_hr: clase CSS para ‹hr›

      .pf_prefield_cell: clase CSS para celdas previas al campo

      .pf_prefield_text: clase CSS para texto de campo previo

      .pf_postfield_cell: clase CSS para celdas de campo posterior

      .pf_postfield_text: clase CSS para texto de campo posterior

      .pf_text: clase CSS para texto ‹input› normal

      .pf_text_narrow: clase CSS para texto ‹input› estrecho

      .pf_text_wide: clase CSS para texto ‹input› amplio

      .pf_dropdown: clase CSS para el menú desplegable ‹select›

      .pf_dropdown_narrow: clase CSS para el menú desplegable ‹select› estrecho

      .pf_dropdown_wide: clase CSS para el menú desplegable ‹select› ancho

      .pf_multiline: clase CSS para ‹textarea› texto multilínea

      .pf_multiline_narrow: clase CSS para ‹textarea› texto de varias líneas estrecho

      .pf_multiline_wide: clase CSS para ‹textarea› de ancho de texto de varias líneas

      .pf_listbox: clase CSS para ‹select› listbox

      .pf_listbox_narrow: clase CSS para ‹select› listbox estrecho

      .pf_listbox_wide: clase CSS para ‹select› listbox wide

      .pf_checktable: clase CSS para las opciones de la ‹tabla› de la casilla de verificación ‹input›

      .pf_radiotable: clase CSS para las opciones de ‹tabla› de la ‹entrada› de radio

      .pf_submit_cell: clase CSS para la celda del botón enviar

      .pf_submit_button: clase CSS para el botón de envío

      .pf_submit_image: clase CSS para enviar imagen

      .pf_upleft_corner: clase CSS para el gancho de formulario superior izquierdo

      .pf_upright_corner: clase CSS para el gancho de formulario superior derecho

      .pf_loleft_corner: clase CSS para el gancho de formulario inferior izquierdo

      .pf_loright_corner: clase CSS para el gancho de formulario inferior derecho

       

      Si tiene alguna pregunta, póngase en contacto con nosotros en help@rockcontent.com. 😀