Form & User Input

• What's Difficult About Froms?
• Handling Form Submission & Validating User Input
• Using Built-in Form Features
• Building Custom Solutions 

What's Difficult About Froms?

Form Submission 

Handling submission is relatively easy

Entered values can be managed via state

Alternatively, they can be extracted via refs

Or via FormData and native browser features

 

Input Validation 

Providing a good user experience is tricky

You can validate on every keystroke -> errors may be shown too early

You can validate on lost focus -> errors may be shown too long

You can validate on form submission -> errors may be shown too late

 

 

Handling Form Submission & Validating User Input 

<form>
<label htmlFor='email'>Email</label>
</form>

native html에서 설정하는 for함수의 react 버전.

 

<form> </form> 내부의 버튼들은 양식을 제출하는 용도로 사용됨.

HTTP 요청이 발생하고, 웹사이트의 서버로 전송

 

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

Client-side form validation - Learn web development | MDN

 

Next.js 를 현재 사용하기에, 거기서 보다 자세히 알아보도록 하자.