4. 입력 폼(Form), 유효성

1. 폼, Form

폼(Form)이란 보통 사용자와의 상호작용을 위해 입력을 받아 서버로 전달하는 역할 수행
<form>과 <input>은 사용자가 입력한 값을 전달 받을 때 사용하는 태그

2. 입력 폼 예시

사용자가 데이터 입력 후 제출하는 예시

index.html


<form style={{ padding: '1rem', border: '1px solid #ccc', borderRadius: '8px', maxWidth: '400px' }}>
  <label htmlFor="fname">First name:</label><br />
  <input
    type="text"
    id="fname"
    name="fname"
    placeholder="홍길동"
    style={{ border: '1px solid #ccc', padding: '8px', width: '100%', borderRadius: '4px' }}
  /><br /><br />
 
  <label htmlFor="lname">Last name:</label><br />
  <input
    type="text"
    id="lname"
    name="lname"
    placeholder="길동"
    style={{ border: '1px solid #ccc', padding: '8px', width: '100%', borderRadius: '4px' }}
  /><br /><br />
 
  <label htmlFor="email">Email:</label><br />
  <input
    type="email"
    id="email"
    name="email"
    placeholder="example@email.com"
    required
    style={{ border: '1px solid #ccc', padding: '8px', width: '100%', borderRadius: '4px' }}
  /><br /><br />
 
  <button type="submit" style={{ border: '1px solid #ccc', padding: '8px 16px', borderRadius: '4px', cursor: 'pointer' }}>
    제출
  </button>
</form>

직접 해보기

3. 유효성, Validation

HTML에서 유효성이란 웹 표준 재단(W3C)이 지정한 태그의 작성 규칙을 준수하였는지 판단해주는 기준을 말함

유효성 검사 서비스