Learn how basic styles affect the different type of text entry inputs in a form.
- [Instructor] In this video,…you will learn how to style a text entry inputs.…So this will cover all the different inputs…where you type, such as text or number,…but not other types of entry like check boxes or select.…We're going to start out with a webpage…where I've included one of each type of field.…So this is what all of them look like without any styles.…In the CSS at the top, the first two things I have…are the default styles that we looked at…in the last couple videos.…The last thing here is just a list…of all the different input elements…as selectors with no styles applied to them yet.…
So I'm going to start with applying a width as a style.…You can see above that I've applied that to input type text,…input type url, et cetera,…all of the input types including text area.…So I'm going to save that and go to the browser and refresh.…Now they're all the same width.…I used ems to size them,…so that we will change with the font size,…so if I have a large font size in one of these fields…then the box will get bigger so there's room to type.…
- 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.