Web

You can display an ordered list with nested counters like 1.1, 1.2 instead of 1, 2 by using CSS. In this snippet, you’ll find some methods of displaying such numbers.

The <fieldset> tag is used to visually group some logically related fields in the <form> tag. In this tutorial, you will find some examples of using the <fieldset> tag and find out why we need this tag at all.

In the example below, we place the <fieldset> element in a <form> tag. In the <fieldset>, we add the <legend>, <input>, and <label> elements.

 find some methods of creating an HTML table, which has a fixed header and scrollable body. Of course, you need to use CSS. It is possible to achieve such a result by setting the position property to “sticky” and specifying 0 as a value of the top property for the <th> element.

Mailto links are used to redirect to an email address instead of a web page URL. When a user clicks on the Mailto link, the default email client on the visitor's computer opens and suggests sending a message to the email address mentioned in the Mailto link.

To create a Mailto link, you need to use the HTML <a> tag with its href attribute, and insert a "mailto:" parameter after it, like the following:

Most often we may want to show our custom forms in blocks. Here are the simple steps to accomplish this.

In the below code we will create a form called “MymoduleExampleForm” and this form will be placed in a custom block called “MymoduleExampleBlock”.

Step 1 – Create a custom module say 'mymodule'. For details on how to create a custom module in Drupal 

Step 2 – Create a php file named MymoduleForm.php in mymodule/src/Form and place the following code.

In this snippet, you can see how to add a vertical line in HTML. But you need to use CSS, as well. Add a vertical line on the left or right side by using the border-left or border-right properties, respectively. See also how to center a vertical line and how to add a vertical line before a text.

The most common way of creating a click event with CSS is using the checkbox hack. This method has broad browser support. You need to add a for attribute to the <label> element and an id attribute to the <input> element.

Drupal offers a mechanism in the backoffice to control the display of blocks, but it is sometimes necessary to set up a little more complex logic.

Here we are going to hide the "id_block" block from the "header" region when we are on an "article" type node via the HOOK_preprocess_page hook:

Hyperlinks are used to jump from one page to another. A hyperlink commonly opens in the same page by default. But it is possible to open hyperlinks in a separate window.

In this snippet, we’re going to animate the progress bar created with the HTML <progress> tag. In our example, we style Shadow DOM elements, but one thing that may cause difficulties is animating the background which is represented as a repeating linear-gradient.