Simple Input Textbox

In Listing 5-1, we have defined a <form> element inside where we will create an input textbox.

First, we create a title for the form using the <h4> heading class within a parent <div> element. Thereon, we create a <div> element and assign the uk-margin class to it. Next, we create an <input> tag and assign the uk-input class to it. We assign the type attribute and assign the text value to it. Then, we enter the placeholder value inside the textbox using a placeholder attribute.

The output of the code is shown in Figure 5-1.

Contextual Colored-Form Textboxes

We create a title for this example using the <h3> heading class. We create a parent <div> element, within which we define four <div> elements to assign the ingrained default, danger, success, and disabled classes.

For the first default contextual color, we create a <div> element and assign the uk-margin class to it. Then we use an <input> tag and assign the uk-input class to it. Then similar to the previous listing, we assign the type and placeholder attribute with their respective values.

For the second <div> element, we use the uk-form-danger class in conjunction with the uk-input tag. Then we define the type and placeholder attributes with their respective values.

Similarly, for the third <div>, we assign the uk-form-success class in conjunction with the uk-input tag. Then we define the type and placeholder attributes with their respective values.

For the fourth <div> element, we use just the disabled attribute. The rest of the code for the fourth <div> is similar to the default input textbox.

On executing the code, the respective contextual colors will be applied to the four input textboxes.

The output of the code is shown in Figure 5-2.

For the first input textbox, we use the uk-form-width-xsmall class in conjunction with the uk-input class and the disabled attribute alongside the type and placeholder attribute and their respective values.

For the second input element, we use the uk-form-width-small class in conjunction with the uk-input class. We then assign the type and placeholder attribute in tandem. Similarly, we create two more input textboxes with the danger and success contextual colors. We assign the uk-form-width-medium and the uk-form-width-large classes respectively in tandem.

This will result in textboxes having the pre-defined widths mentioned earlier in this listing.

The output of the code is shown in Figure 5-3.

Grid-Width Input Textboxes

Listing 5-4 depicts grid and width facilities for form layouts. We create a <form> tag and assign the uk-grid-medium class to it in tandem with the uk-grid attribute. Then we create the first form input textbox and assign the uk-width-2-3 class to it. Thereon, we create three more textboxes and assign the same uk-width-1-3 class to all of them.

Next, we create a textarea box for comments. For it, we assign the uk-width-2-3 class to define its width. Thereon, we create a <textarea> tag and assign the uk-textarea class to it in conjunction with the rows attribute, to which we assign the value 5. This will ensure that the textarea input form element will have an area of five rows for the defined width. Finally, we allocate a placeholder attribute with a value to it.

The output of the code is shown in Figure 5-4.

Select Options

In Listing 5-5, we create a parent <form> tag and then include an <h1> tag inside it. Then we create a <div> class and assign a uk-width-1-3 class to allocate a length of 1/3rd of the 12-column default grid to the form dropdown option selector.

Next, we use the <select> tag and assign the uk-select class to it. Then we define the different options for different engineering branches using the <option> tags. We define the value attribute and assign the numerical values to each <option> element.

The output of the code will result in a textbox with a dropdown selector-function arrow inside the right end of the input textbox. On clicking that selector arrow, you can see the different engineering options within for you to choose.

The following screenshot (Figure 5-5) will display the different options inside the selector.

Icons within Textboxes

Firstly, we create a <form> element in Listing 5-6. Then we use a parent <div> and assign the uk-inline class to it so that the icon can be positioned inside the form. Next we create a <span> element and use the uk-form-icon class to it. Then we use the uk-icon attribute and use the icon: user value to it. Then we create an input textbox to it and assign the uk-input class in conjunction with the uk-form-success class. To the same input textbox, we include the type and placeholder attribute with their corresponding values.

Similarly, we create another textbox and assign the uk-form-icon-flip in conjunction with the uk-form-icon class in the <span> tag. We append the flip word to the icon so that the icon is placed to the right in the input element. By default, the icon is placed to the left of the input textbox. In this case, we use the warning icon. We add the necessary placeholders and type attributes with their respective values.

Moving forward, we create a button and use the unlock icon with a ratio value of 2 to increase the size twofold.

The output of the code is shown in Figure 5-6.

As you can see from Figure 5-6, we can place the icons to the left and right of the form input element.

Forms with Stacked Labels

In Listing 5-7, we create the <form> tag and assign the uk-form-stacked class to it. Then we define the parent <div> and assign the uk-margin class to it. Thereon, we create a <label> element and assign the uk-form-label class to it. Then we add a for attribute and assign the form-horizontal-text value to it. Next we assign the label name.

Moving forward, below the same label, we create a <div> class and assign the uk-form-controls class to it. Then we add an id and assign the same value to it as we had done pertaining to the for attribute of its label. We then add the placeholder and type attributes with their respective values to it.

We move on to create two more input textboxes and assign the labels respectively to them.

When we execute the code, the labels will be positioned above their respective textboxes.

The output of the code is shown in Figure 5-7.

If, however, you need the labels and input elements next to each other, then you need to use the uk-form-horizontal class instead of the uk-form-stacked class.

The output on using the uk-form-horizontal class for the form is shown in Figure 5-8 (screenshot taken on a desktop screen).

Sign-Up Form

In Listing 5-8, we initially create a <form> tag and assign the uk-form-stacked class to it, which will ensure that the defined labels will be displayed first and the respective input element will be stacked below just like the example in Listing 5-7. In fact, we have used the same Name, Email, and Password labels and their corresponding input textboxes as in Listing 5-7.

Once we assign the stacked class to the form, we jot down a <fieldset> tag and assign the uk-fieldset class to it. Then we assign a caption to that <fieldset> element by using the <legend> tag with the uk-legend class associated with it. What the fieldset property does is provide a grouping for a part for the UIkit form. You can disable all the contents of the fieldset section in one go using Boolean attributes, meaning this will ensure no browsing instances like mouse clicks, touch, or focus-based occurrences. However, the <legend> and its contents will not be disabled in this case.

As we mentioned earlier in this section, we create the labels and the input elements, which will be stacked over each other. Next, we create a <div> element, to which we assign the uk-margin, uk-grid-small, and uk-child-width-auto classes alongside the uk-grid attribute. Within it, we create three label elements and assign the uk-radio class to it along with the radio type attribute and name property to it. The three radio buttons are named as Male, Female, and Other. We use the checked attribute inside the input element for the label of the first radio button named as Male. This will keep it as the default checked radio button.

Moving forward, we create a similar <div> as the preceding one, but instead of the radio attributes, we use the uk-checkbox as the input class alongside the checkbox type attribute. We name the checkbox as Subscribe Newsletters.

Following this, we create a paragraph <p> element and create a normal button and assign the primary contextual color to it. Then we create an adjacent <span> element with UIkit’s built-in Sign-In Icon (we use the ratio property and set it to 2 to increase the size of the Sign-In Icon). Next, we use the closing <fieldset> tag and the <form> container tag.

For social media icons below the form, we use the <ul> tag and assign the uk-iconnav class to it. Then we create seven different social media icons using seven <span> tags inside it. The Sign-Up form on a mobile phone screen is shown in Figure 5-9.