[CODECADEMY] 코드카데미 4일차 : <input> required / min&max / minlength&maxlength / pattern

 

1. required 

 

회원가입 등을 할 때 *필수입력 이어서 미 입력시 다음 화면으로 넘어가지 않도록 않게 하는 속성

 

<input type="text" required>

<form action="/example.html" method="POST">
  <label for="allergies">Do you have any dietary restrictions?</label>
  <br>
  <input id="allergies" name="allergies" type="text" required>
  <br>
  <input type="submit" value="Submit">
</form>

미입력 후 Submit 시 'Please fill out this field.'라는 경고문이 나타남

 

 

2. min / max (숫자의 개수 제한)

 

user가 입력하는 값의 최소값과 최대값을 지정하여 정해진 범위 안의 숫자가 제출되도록 하기 위한 속성

<input type="number" min="최솟값" max="최댓값">

<form action="check.html" method="GET">
        <label for="guess">Enter a number between 1-10:</label>
        <input type="number" name="guess" id="guess" required min="1" max="10">
        <input type="submit" id="submission" value="Submit">
</form>

최대값을 초과한 숫자 / 최소값 미만의 숫자 입력 후 Submit 시 위와 같은 경고문이 나타남.

 

3. minlength / maxlength (텍스트 개수 제한)

예 : 네이버 상품평 최소 10글자 제한하여 입력 / 비밀번호 최소 8자리 입력 등

 

<input type="text" minlength="최솟값" maxlength="최댓값">

<form action="/example.html" method="POST">
  <label for="summary">Summarize your feelings in less than 250 characters</label>
  <input id="summary" name="summary" type="text" minlength="5" maxlength="250" required>
  <input type="submit" value="Submit">
</form>

최소 글자 수 을 미만의 숫자 / 최대 글자 수 초과의 숫자 입력 후 Submit 시 위와 같은 경고문이 나타남.

 

4. pattern 정규식

요청한 형식에 맞도록 user가 입력하게 하기 

예 : 회원가입 휴대폰번호 입력 시 문자가 못오게 하는 것 / 아이디 만들 때 특수문자 못오게 만들 때

<input type="text" pattern="정규식">

다양한 정규식이 있다. 

 <form action="submission.html" method="GET">
        <label for="username">Username:</label>
				<input id="username" name="username" type="text" required minlength="3" maxlength="15" pattern="[a-zA-Z0-9]+">

        <label for="pw">Password:</label>
				<input id="pw" name="pw" type="password" required minlength="8" maxlength="15" >
        <input type="submit" value="Submit">
      </form>