Happily, Ian Yates, Web Design editor here at Tuts+, created for us some beautiful illustrations. Similar to what we’ve done in a previous tutorial, we’ll create an SVG sprite and embed all the drawings within it. Then, inside the form, we’ll render the target icon whenever we need it by calling the use element. Notice the preserveAspectRatio="none" attribute which we attached to most of the illustrations.
We did this because, as we’ll see later, our icons will scale and loose their initial dimensions. The form will consist of a heading and an unordered list. Alternatively, for readability reasons, we could have created an extra child element and passed those classes to it, like this: container for setting a maximum width to the form and horizontally center its contents: Īs you can see, each of the list items above contains one or more classes. Inside the list, we’ll place the SVGs and form elements. The first list item will include two required input fields along with their SVGs: Today, we’ll continue the journey into the forms world and learn to create a responsive handmade SVG form from scratch. Here’s the form that we’re going to build: 1. Within the third list item, we’ll place a textarea and its associated illustration: In the same way, the second list item will also hold two input fields along with their SVGs: We’ll start with an SVG and a form element: 1. The fourth list item will include a fieldset element. Inside it, we’ll put a legend element, a list with two radio buttons along with their SVGs, and its related SVG: įinally, the fifth list item will contain the submit and reset buttons along with their SVGs: īefore having a closer look at the individual form elements, let’s first define some basic CSS styles.
0 kommentar(er)
