Learn how box sizing affects the width of your form elements.
- [Instructor] The default widths for various input types…can be slightly different, in this video,…we'll see how to give them a consistent width.…First, here are all the different input types.…We haven't styled them yet, you can see…that they're actually all different widths.…Even if I give them a width, they're not quite even.…The only ones that are actually 150 pixels wide…are the search and the select,…the others are actually a little bit more than a 150 pixels.…But when you're styling a page,…you're probably going to want…everything to be a consistent width…just to make it look good.…
So you can do that using a CSS property called, box sizing.…Box sizing changes the way the browser…interprets the box model, the box model,…basically describes how padding and margins…are rendered around an element.…The default box sizing is content box.…That's the first box you see here,…so, what happens here, this paragraph that you see,…is 600 pixels and there's 50 pixels of padding.…By using box sizing content box,…when you take the paragraph and add the padding,…
- How users interact with forms
- Designing forms that are easy to use
- Following data privacy laws when collecting information
- Choosing which HTML input types to use
- Adding buttons
- Adding interactive validation
- Styling form fields with CSS
- Using positioning and flexbox to create responsive form layouts
Skill Level Beginner
Building Web Applications with Ajaxwith Sasha Vodnik1h 31m Intermediate
1. Designing a Form Experience
2. Creating Forms with HTML
3. Making Forms Interactive
4. Styling Form Fields with CSS
5. Form Layout with CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.