Forms
      Voltar para o início
      1. Central de Ajuda
      2. Ion
      3. Forms

      Library Forms: personalizando HTML Forms com o estilo do seu Framework Theme

      Você gostaria que seu formulário HTML pudesse usar os estilos das Framework Themes disponíveis no seu Ion Console? Se sim, continue lendo!

      Você pode estilizar seus formulários HTML para combiná-los com seu tema, incluindo todas as classes CSS específicas de formulários do Ion por meio do código de formulário.

      Por exemplo: para estilizar uma input textbox, adicione a classe "pf_text" à caixa de texto de entrada, como a seguir:

      ‹input type="text" id="first_name" name="first_name" class="pf_text" /›
      • .pf_text é o tamanho padrão de um campo de texto (padrão 130px de largura).
      • .pf_text_narrow é o tamanho da dimensão estreita de um campo de texto (padrão 75px de largura).
      • .pf_text_wide é o tamanho da largura de um campo de texto (padrão 250px de largura).

      Observação: A largura e o estilo desses campos podem ser ajustados no nível do tema ou dentro do seu código de formulário html personalizado.

      Para controle de tema dos field labels, adicione a classe "pf_label_text". Por exemplo:

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

      Para controle de tema do botão de envio, adicione a classe "pf_submit_button". Por exemplo:

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

      Se você estiver usando uma hint text no seu formulário, você pode usar a classe "pf_hint_text". Por exemplo:

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

      Exemplo de formulário HTML personalizado (sem controle 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› 

      Referência completa das classes CSS específicas para formulário

      .pf_form_table: classe CSS para form table 

      .pf_field_row: classe CSS para field rows 

      .pf_field_row_bad : classe CSS para bad field rows 

      .pf_label_cell: classe CSS para label cells 

      .pf_label_cell_bad: classe CSS para bad label cells 

      .pf_label_text: classe CSS para label text 

      .pf_label_text_bad: classe CSS para bad label text 

      .pf_field_cell: classe CSS para field cells 

      .pf_field_cell_bad: classe CSS para bad field cells 

      .pf_hint_cell: classe CSS para hint cells 

      .pf_hint_text: classe CSS para hint text 

      .pf_hint_text_bad: classe CSS para bad hint text 

      .pf_hr_cell: classe CSS para ‹hr› separator cell 

      .pf_hr: classe CSS para ‹hr› 

      .pf_prefield_cell : classe CSS para pre-field cells 

      .pf_prefield_text: classe CSS para pre-field text 

      .pf_postfield_cell: classe CSS para post-field cells 

      .pf_postfield_text: classe CSS para post-field text 

      .pf_text: classe CSS para regular ‹input› text 

      .pf_text_narrow: classe CSS para narrow ‹input› text 

      .pf_text_wide: classe CSS para wide ‹input› text 

      .pf_dropdown: classe CSS para ‹select› drop-down 

      .pf_dropdown_narrow: classe CSS para ‹select› drop-down narrow 

      .pf_dropdown_wide: classe CSS para ‹select› drop-down wide 

      .pf_multiline: classe CSS para ‹textarea› multiline text 

      .pf_multiline_narrow: classe CSS para ‹textarea› multiline text narrow 

      .pf_multiline_wide: classe CSS para ‹textarea› multiline text wide 

      .pf_listbox: classe CSS para ‹select› listbox 

      .pf_listbox_narrow: classe CSS para ‹select› listbox narrow 

      .pf_listbox_wide: classe CSS para ‹select› listbox wide 

      .pf_checktable: classe CSS para ‹table› of checkbox ‹input› options 

      .pf_radiotable: classe CSS para ‹table› of radio ‹input› options

      .pf_submit_cell: classe CSS para submit button cell 

      .pf_submit_button: classe CSS para submit button

      .pf_submit_image: classe CSS para submit image 

      .pf_upleft_corner: classe CSS para top left form hook 

      .pf_upright_corner: classe CSS para top right form hook 

      .pf_loleft_corner: classe CSS para bottom left form hook 

      .pf_loright_corner: classe CSS para bottom right form hook

       

      Caso você tenha dúvidas, por favor, entre em contato conosco help@rockcontent.com. 😀