Responsive Web design - Forms with HTML & CSS3 Flexbox - Web Development guide | Luis Carlos | Skillshare

Responsive Web design - Forms with HTML & CSS3 Flexbox - Web Development guide

Luis Carlos, Engineer, Web Developer and Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (13m)
    • 1. Trailer

      0:58
    • 2. Responsive form with HTML & FLEXBOX

      8:37
    • 3. Change form elements position easily

      3:16

About This Class

In this class i want to share with you the creation of  responsive web forms using structure language HTML(you can see HTML class in the hyperlink) and Flexbox model.

b8386e51

Using the properties of this model you can get amazing layoutst using intuitive and very simple code. If you want to learn how flexbox works, you can watch the class Learn CSS3 Flexbox & Build Responsive Websites in 2018, where I explain in detail the functioning of this model created in version 3 of css. 

 

This class is divided in two parts:

  • Use of HTML to create fthe different input elements of the form and use of flexbox to "organize"  and fine tune layout 

  • Use of simple flexbox property the change position of the form fields 

At the end of this class you are able to create your  form with responsive design, that you can share with community.

At the end feel free to leave a comment!

Enjoy it.

Luis Carlos

Transcripts

1. Trailer: want to know how to create responsible farms using HTML and flax box. If the answer is yes, this is the right place for you, where you will create your own farms using the different input elements used in HTML and the flex box model that provides the mart efficient white establish position and align the different fields off your farm. All these using always responsive design. This class is intended to students aware of the basic knowledge off HTML and flex walks. So let's start creative response. He farms and turn you into a successful developer. Enroll now. 2. Responsive form with HTML & FLEXBOX: After creating an image gallery, I want to build a responsive farm using flax box to create my form. I used to come and method with the farm element to represent a section that contains interactive controls to submit information for arm users to the Web Settler Inside the form is where I create all the content, so my farm will work as my flex container. And inside I have my flex items death containing boot fields to receive data in this image . You see that situation where I ever container represented with red line and to flex items inside with Blue Line one at left that receives name and email information and other at right where users varieties message. The second flex item will act us container because I want to have to flex items inside it represented with black line color that I want to be displayed in a single column. This draft is the starting point that I used for the creation off this project. Now the coat, the first step in HTML coat is open tech form that I give the class name main form, and inside it I create two lives that work as flex items, one to receive the name in the mile off the user and the other debt receives user message. My first flex item I define with glass, name, contact, Death contain to input fields to receive text and correspondent labels for the case off the user name. I create my label with four at route that allows through the value even click on label, and it will be treated like leaking on the associative input element. So I defined before its roots with the value name that will be the value that I defined for the I. D. In my input tech and there's allowed to associate a label with input fields. I just need to finally define in my in protect the type attribute that receives text value , since I want to insert in this field texts and I d with value name. Like I said previously, after creating this field, I create another one, this time with the four attributes with the name E Mail, Then my input tech with the email i D and the type attribute with email value so that this field receives invalidates the email address formats to finish the content off the first flex item. I create the submit button using the tech button and give to type attribute the value submits between starts and then tech. I write text submit that will appear in the button Now the second flex item where I want to feel to receive the message to send First I defined the class name for Did Eve for this purples. I created it with the class name text message def that receives text where I define the label tag with attribute for with name M S G And to write the content off the message. I used the deck text area where the i. D has the same name that I give to my label. So that level and text field being associative, I have now finish it the html code. And now I have to define the style for the different elements Creative. The second part is for the CSS code. The first step is defined the style for the glass main form. Like I said, the forum act as flex container. So I used to display property with value flex and give a background color light green to identify the farm in the Bay Bridge. Do it. I define with value 70% and I've with 300 pixels to center the container. I use margin with value zero and alto to finish. I give a betting value off 20 pixels to have some space between the border off the form and the content that, as inside we see now in the browser the form with a better look. Just needing to add some properties for deflects items and to change position and size off the elements. First, I change style to contact class. I defined this class with Valley One to flex property and the margin right value off 60 pixels to have some spice between the two different sections off the farm. The contact flex item as inside two groups of input fields to in certain data and correspondent labels ending with the submits button. I want that my boot fields occupy an entire row off the flex item. So for these I define with with the value off 100% and to optimize space between elements and position, I give a bedding off 10 pixels and a margin button off 30 pixels to finish the elements inside the first flex item. I change the style for my button with the background color dark gray, Golar white for the both indexed and the padding off 15 pixels. Now the text message glass elector to change the style of flex container that receives the field where the user writes the message to send. I define this class with value flex for display property because it will work as flex container. I want that deflects items inside our arrange in a column, so I use flex direction. Property with Value Column. Next, I give value to to flex property to this flex item. Occupy two times more spice when compared with the flex item that I defined with very one previously. Finally, I want a margin button off 50 pixels for these flex item to finish the text area that I want to occupy space from top to bottom. To make this change, I give Valley one toe flex property that makes that the field to insert text now goes to the bottom off flex item. As you can see now in the image I have now my responsive far completed. As you can see in the browser. Thanks 3. Change form elements position easily: After creating a responsive form, I will just make a slight change to the gold. Using Affleck spots property so you can see the potential that the properties off this model have. When I created the form, you verified that the do flex items inside the container were arranged in role from left rights, respecting the order that they were inserted into html cold. This is the expected behavior off this model That always happens if you don't apply any property to change this behavior. What I just want to change now is the position off like sytems. By placing the flex item contact on the rights and next message on the left. For the situation, I only used order property giving the value to for my class contacts and for the text message class, I give the valley one to the same property. You can see that after these changes, the flex items change positions using just a simple property for this guy's property order . I need now to change in the class, contact the property march in rights to marching left, giving the value 40 pixels do. If some space between the two flex items, it can be seen death. After this change, Dean put fields are outside the container. If I give background color to deflect sytem contact, you see that these fields are also exceeding the limits off the flex item as expectable because container was also crossed. Do situation happens because the wheat calculation is affected by margin and bedding values . To get around this situation, I used the box sizing property with the border box value, which allows do with property calculation to not be affected by bedding and Martin. Now it's visible that by adding this property and changing the values off margin left, the input fields always occupy 100% off the wheat off the second flex item never happening an overflow situation. So don't forget, always easy and useful is to use the order property. That's all for now. Things