Web Forms 2021 - Part 2: Form Attributes (accept-charset, enctype, action, method and lots more) | Clyde Matthew | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Forms 2021 - Part 2: Form Attributes (accept-charset, enctype, action, method and lots more)

teacher avatar Clyde Matthew, !false | funny, because its true

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

35 Lessons (3h 14m)
    • 1. Class Introduction

      1:12
    • 2. accept-charset - ISO and ASCII

      12:25
    • 3. accept-charset - UTF-8

      9:38
    • 4. Step Back: accept-charset

      2:19
    • 5. Example of using the THETA symbol

      4:57
    • 6. Url Encoding (part 1 of 3)

      4:04
    • 7. URL Encoding - Numerical Character Reference (part 2 of 3)

      7:21
    • 8. URL Encoding - Hex (part 3 of 3)

      2:56
    • 9. The name attribute

      6:25
    • 10. The accept attribute

      1:58
    • 11. The action attribute

      4:03
    • 12. The action attribute (example)

      4:44
    • 13. URLSearchParams() - an introduction

      7:13
    • 14. URLSearchParams() - making our form dynamic

      6:30
    • 15. GET method

      6:40
    • 16. POST method

      5:17
    • 17. GET vs POST

      3:58
    • 18. Why does HTML forms not support other METHOD types (like PUT, DELETE and PATCH)?

      5:14
    • 19. The accept-charset vs enctype

      4:17
    • 20. enctype - GET request example

      3:17
    • 21. enctype - POST request example

      10:40
    • 22. What is boundary and multipart?

      7:42
    • 23. Advanced Example - setting up our HTML

      7:45
    • 24. Advanced Example - setting up our server

      7:56
    • 25. Advanced Example - looking at multipart/form-data

      9:04
    • 26. Summary: enctype

      2:51
    • 27. The rel attribute

      5:15
    • 28. The autocomplete attribute

      8:34
    • 29. The autocomplete - example

      4:07
    • 30. The novalidate attribute

      3:20
    • 31. The novalidate - example

      4:04
    • 32. The target attribute - intro

      6:36
    • 33. The target attribute - example

      7:16
    • 34. Summary - wrapper

      3:39
    • 35. Class outro

      1:11
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

13

Students

--

Projects

About This Class

WELCOME TO THIS SKILLSHARE SERIES ON HOW TO BUILD AND UNDERSTAND WEB FORMS. THIS IS THE SECOND CLASS ON WEB FORMS --> FORM ATTRIBUTES. 

What we cover in this particular Class?

We will cover of ton of information in this entire series, but for Part 2 I'm going to teach you about all form attributes. 

Attributes are always placed in an HTML opening tag. Forms are no different. But why does it matter and why is it so important for you to know what attributes are available to you? Well, firstly, the browser knows the standard attributes and automatically creates an attribute property on the DOM object. This just makes our lives a lot easier. Secondly, knowing what form attributes are available to you, will only make you a better programmer and will enhance your skill set. 

Because the <form> element is so important, in this Class (which is part 2 of an entire form series) i'm going to take time to understand form attributes and why they can be useful. 

The 2 most common attributes you'll see developers use on the <form> element are (1) the METHOD attribute and (2) the ACTION attribute. I'll discuss in this class the differences between them.

But this is only the tip of the iceberg. We also get into a lot more detail about other attributes. Some of them are pretty advanced and many developers don't know what I'm going to teach in this class. 

In this class, we're going to talk about things like: 

  • how your computer stores and transfers text (characters) 
  • what encoding is and why is it necessary
  • what the accept-charset attribute does
  • what the different encoding types are (ISO, ASCII, UTF-8)
  • the accept attribute
  • the differences between a POST and GET request
  • a TON MORE!!!

So what are you waiting for? 

LET'S BEGIN

--- in case you're wondering, this entire series is about web forms. 

THE NITTY GRITTY OF WEB FORMS?

A web form is also known as an HTML form. It’s a place where users can enter data that’s then sent to a server for processing. Web forms allow users to place orders on your site, to provide their name and email address to sign up for a newsletter, or to sign up as a member to your site and so forth.

What’s really great about web forms is that there is no “one size fits all”. You can use your artistic flare, and personal business acumen to create web forms with a particular length, format, content type and appearance.

By doing this course, you’ll be able to improve your web form usability, which will ultimately enhance user experience and get website visitors excited about completing your form and converting.

Why is this course so important?

  • Forms which are on point present an opportunity for a company to grow and capture loyalty.

  • A form can often be both a marketing tool and a necessity. A form that puts the user at ease, that evokes feelings of trust, will get filled out far more often than a form which looks (or is) complicated and confusing.

  • After completing this entire Skillshare series, you will be knowledgeable, confident and the “go-to” person for forms.

Let me share my form building skills with you

Understanding how forms work will equip you to become an awesome front-end programmer. Learn how to implement your creative, different and dynamic ideas into your website. Master forms and you’re half way to becoming a full stack web developer. Take control through understanding. Delivering a perfect, interactive and functional form is challenging. In this series, I take a deep-dive into explaining web forms and how they work. Why do we need to wrap our form within <form> tags? How can you include a progress bar in a form? How can you customize a toggle or checkbox? Where does the data go once a user clicks on the submit button? How can you perform validation on your form? How can a user upload a file? What happens once the data arrives at the server? What are the different types of events we can listen to on forms? By understanding these questions, and many more in the course, you will be able to build advanced forms and better yet, understand the full stack process! In other words, you will be able to create dynamic forms that improve user engagement and experience.

WHAT THIS SERIES COVERS

This series is huge and comprehensive, from basics to advanced

This entire series (which I've split into multiple classes) will give you solid fundamentals and practicals regarding forms. It can be taken alone (you don’t need to do any other course) to achieve your goals. You will emerge from this course with an advanced understanding and practical experience with building forms. It will take you to the point where you will understand what method (GET or POST) to use when sending form data, how to define where the data goes, how to perform advanced client-side validation (checking errors on the form before it is sent to the server), how to write custom pattern validation rules (using regular expressions), how to run servers and how to view all HTTP request information. This is awesome knowledge. This series will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end form web development.

By the end of this series, you'll be able to “speak” and “walk” FORMS by gaining an understanding of how you can build it, manipulate it and style it in meaningful and practical ways. 

Why should you learn so much about forms?

A web form is one of the best ways to get input from prospective clients and indirectly establish a relationship with them. The time you spend in bringing the user to your website should be matched with the time spent in perfecting the user experience with your web forms. It is surprising to see so many sites these days contain complex and frustrating web forms that cause a negative experience.

Ultimately, a web form allows your visitors to get in contact with you and to send information, such as an order, a catalogue request, or even a query, which is passed on to your database.

Can you begin to see how important forms are and how their use can be escalated?

*** The most important course on FORMS on Skillshare***

Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how HTML code works behind the scenes. This is particularly true when it comes to building forms. If you’re wanting to become a full stack developer, you need to know, really know, how forms work. You need to understand how the browser URL encodes form data, how the browser sends data to a URL that you specify, and how to perform validation to ensure the user does not submit invalid data.

A unique approach

You will learn "why" things work and not just "how". Understanding advanced topics about forms (URL encoding, accept-charset, multipart/form-data, regex, etc) is important as it will give you infinite possibilities and upskill you. Armed with this knowledge, you’ll be able to create forms that are tailored to your needs, and allow the form data to get submitted to a server via AJAX. You will be able to create forms that are customizable by the user (for example, if the user wants to change the color of the form theme). You can create a control on a form that displays the progress completion of the form and displays messages to the user along the way.

Can you begin to see how pivotal forms are and how important having knowledge about forms is?

How is this Skillshare course different?

There are lots of courses on Skillshare that focus on web development. Many never get into the detail about how HTML forms work behind the scenes – a skill that every full-stack developer needs to master in order to utilize potential.

In this series, I focus on the more advanced topics of true web development when it comes to forms. This includes understanding what all of the attributes on the <form> element mean, understanding the different <input> types in detail, what URL encoding is, and how data is sent over the wire to a server.

Practice makes perfect

Theory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this entire series.

Is this course for you?

Absolutely. If you fit in any of these categories then this course is perfect for you:

Student #1: You want to advance in the world of programming.

Student #2: You want to know how successful developers build dynamic forms that engage with the user, have high conversions that put them ahead of the competition.

Student #3: You want to gain a solid understanding of how forms really work

Student #4: You want to start using backend technologies like Node or PHP with forms

WHY START NOW?

Right this second, your competitors are learning how to become better web developers.

Web development is a blazing hot topic at the moment, and in the foreseeable future. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.

Lets get started.

See you in the lectures.

Meet Your Teacher

Teacher Profile Image

Clyde Matthew

!false | funny, because its true

Teacher

Ideas are a dime a dozen. The hard part is execution. Unfortunately, most people never carry tasks to completion.

 

I've worn many hats in my career …  As a result, I have an ability to view all sides of a coin, something that is becoming crucial in our tech-savvy world.  

 

My experience and a few words:

 

·        I’ve had to learn things the hard way (aka: hard slog)

·        I want to teach people what I’ve learnt, with the hope of making a meaningful impact (cliché, but true)

·        No one is a master of everything. But at the same time... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class Introduction: Welcome up a, to get across, I'm super, super excited. So what are we going to be covering in this class? That's going to be epic because in this class we're going to be building solid foundations when it comes to holding waveforms. And you going to need to understand a very important element, all element, when it comes to writing HTML forms. Now the form element does nothing visually. We've already seen that in the previous class. It really doesn't matter where you put your form controls outside of the form, within it when it comes to appearance. But there is a lot that happens behind the scenes when you use the form record. In particular, HTML gives us a native attributes when we use the form record. And exciting because we get to use attributes such as action, method with ink type, role name, put exhibits, et cetera, et cetera. They are a ton of them. And this is what this class is all about. We're going to delve deep entities and attributes so you can understand web forms and more deeply fundamental. I'm super, super excited. Yes, this losses for everyone joined. I joined him a call. Wait to see you in the very first lecture videos. 35. Class outro: Could we have done a lot, haven't we? In this class, there's been Epic. We learned about a tan or form attributes. But you might be thinking Clyde, in this class we've only really only dealt with the form record. What about other form controls? How does it all work? Pull hold onto your horses. We going to get, remember, I've split up this entire series into class chunks. But anyways, what is the most important attribute that we discussed in this class? Arguably, let's write the method attribute. And one of the values of this method attribute is sending a get request to the server. And we've already discussed when we seem to get request, the daughter in that form is appended to the URL. But did you know that the URL has to apply by certain rules, browsers cannot just send any daughter in URLs all over the wire. It has to abide by certain rules. So I kind of want to dig into your URL encoding and the next clause. But for now, pat yourself on the back. You've completed this class, you've done really well. Grab a coffee, and I'll see you in the very next class. Walden.