You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
13 Hrs
40 Min
46 Seg
Curso de Materialize

Curso de Materialize

Diego De Granda

Diego De Granda

Desarrollo de checkboxes en el formulario

15/17
Resources

How to create and organize sections in a web form?

When creating web forms, clarity and organization are crucial aspects that reinforce the user experience. In this case, we will build sections using div and h3 for a perfect cohesion between content and visual design.

How to add specific sections for checkboxes?

To add a checkbox section to your form, start by creating a div container with a specific class, for example, Section. This approach makes it easier to organize the different parts of the form. Within this div, use an h3 for the section title with a class that facilitates the centering of the text, such as center.

Once the basic structure is created, add label and input checkbox elements for each desired option:

<div class="section"> <h3 class="center">Are youinterested in receiving news from?</h3> <div class="checkbox-row"> <label class="col full-width med-4"> <input type="checkbox"> <span>Politics</span> </label> <label class="col full-width med-4"> <input type="checkbox"> <span>Economy</span> </label> <label class="col full-width med-4"> <input type="checkbox"> <span>Finance</span> </label> </div> <!-- More options can be added here --></div></div>.

How to develop an attractive submit button?

Creating an attractive button is essential for a functional form. To start, insert a new div for the button section. Then, add a button with a distinctive class to apply CSS styles that highlight its appearance. Integrate visual effects or animations to enhance interaction:

<div class="button-section"> <button class="btn material-effect"> <i class="icon-right">Send</i> </button></button></div>.

How to manage form spacing and styling?

Optimize the layout by adjusting the margins and size as needed. For example, if you notice excess space or want to adjust the layout, modify the corresponding CSS properties:

.record-header { height: 400px; /* Adjust height to reduce space */}

Also, make sure that the columns of your form fit correctly to the responsive design by using a column system, for example, with size classes like col full-width med-4.

What challenges or improvements can you implement?

Finalizing a web project offers a lot of room to implement improvements or customizations. Among the tasks that can help you consolidate your skills, consider:

  1. Linking blog screens: Make sure that the blog, registration and index pages are properly connected for easy navigation.

  2. Include images in titles: Use images in form headers to add visual interest and personalization.

  3. Add more links and create custom views: Fill in additional links in the navigation menu and create unique views that fit your vision for the blog.

Keep a proactive mindset as you work on your form design; every challenge is an opportunity to learn and improve your web development skills - move forward with confidence and enthusiasm!

Contributions 10

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

  • Materialize sugiere la siguiente estructura para los inputs tipo
    checkbox:
    <label class=“col s12 m4”>
    <input type=“checkbox”>
    <span>Política</span>
    </label>

  • Sirven para dar diseño especial a los botones:
    waves-effect waves-light

Reto: 1) Enlazar todas las páginas, 2) Crear las otras páginas 3) En la pantalla de registro había opción de poner imagen.

Lo único que no me gusta de materializecss es cómo maneja el componente autocomplete... La forma en que devuelve el objeto y las keys lo veo medio engorroso

El desarrollo Front-end se puede agilizar sustancialmente utilizando el framework materialize la cual se podria definir como la herramienta que se guía por las líneas de diseño de Material Design de Google

"Entre las cosas que te ofrece Materialize encuentras todo tipo de interfaces, como colores, transiciones, tipografías, botones, navegadores, cabeceras, base de datos de iconos, elementos de formulario, tarjetas, tooltips, acordeones, menús desplegables, botones flotantes, migas de pan, menús con pestañas, sistemas de paginación, listas, así como un sistema de rejilla y mucho más. Por supuesto, todos los componentes y las utilidades de layout son responsive y a se adaptan a todo tipo de pantallas, grandes y pequeñas. Por todo, este framework de diseño web es un auténtico regalo para el desarrollador."
Tomado de:
https://desarrolloweb.com/articulos/materialize-framework-css.html

Para eliminar el mismo texto en VSCode que se repite varias veces, seleccionas el texto y presionas Control + D las veces necesarias. Esto seleccionará el texto que se repite y luego borras una sola vez.

Hay un fallo en la parte de separar nombre apellidos y correo contraseña en rows distintas, si te das cuenta cuando haces la pantalla del movil hay un padding entre los dos rows todos esto fields tendrian que haber ido al mismo row de esa forma no habría el padding

Quedo muy bien la parte de registro.

Perfecto! Ahora a hacer los retos para terminar el proyecto y de paso practico y continuo con el cierre del curso!

Me hizo falta en el curso la parte del toggler para el menú

Durante la clase se aplicó la clase center-align al button pero este permaneció en la parte izquierda, para lograr centrarlo mi solución fué la siguiente:

<div class="section">
                <div class="row">
                  <div class="col s12">
                    <div class="center-align">
                      <button class="btn waves-effect waves-light">Enviar
                          <i class="material-icons right">send</i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>