Bairavan

·

Follow

Published in

ILLUMINATION

·

3 min read

·

2 days ago

--

1

Share

Hi, Here you’ll see the five simple but most important concepts every front-end developer should know. This might be for beginners, but also for some back-end developers who occasionally do HTML form development. They should know this too. Why I’m writing this is, I was basically working as a front-end developer and was familiar with these concepts, but some of my colleagues, who were mostly involved in back-end development and occasionally worked on forms for web apps, faced these issues. So, this might be helpful for people like them.

Let’s dive into the concepts:

1. enctype Attribute

Forms are used to collect data from the user on the front end and send it to the back end. The enctype is an attribute that must be mentioned in the <form> tag If you’re developing a form that has a file input. If you missed this, when you add a file input and expect the file to be sent to the back end, you might face a problem where you are not receiving the file data. This happens because you need to set the enctype to multipart/form-data in the form. Otherwise, the file will not be received.

To send files from a form, always mention enctype=”multipart/form-data” in the form tag.

2. Parsing Input Values

When I was a fresher, I had to validate user input from a form and check if the value was within a specific range. Initially, I was directly comparing the input value with the threshold, but it didn’t work as expected. For example, if the user entered “2” and the threshold was “10,” comparing 2 > 10 would return true. This happened because the input value retrieved from the form is always a string unless you specify the type as number.

To fix this, you should convert the input value into a number using parseInt or parseFloat before performing the validation.

3. Submit Button

If you have two buttons and want to keep the second button as a form submit button, you have to mention the button type as button in the first button, otherwise by default the first button is taken as a submit button.

Make sure the original submit button only has the attribute type=”submit”