티스토리 뷰

HTML

[HTML] Checking Text Length

Dongi 2021. 11. 24. 09:03

동기 여러분 다들 건강하신가요? 겨울이 다가오고 있습니다. 다들 건강 잘 챙기시길 바랍니다. 오늘은 input의 type="text" 상황에서 사용자가 입력할 수 있는 글자를 제한하는 방법에 대해 알아봅시다.

 

Checking Text Length

생김새

<input type="text" minlength="제한 수" maxlength="제한 수">

 

 

예

사자성어를 맞추는 퀴즈를 내는 코드를 만들어 보았습니다.

 

<!DOCTYPE html>
<html>
  <body>
    <form action="/ex.html" method="post">
      <label for="fourletters">비단 위에 꽃을 더한다는 뜻으로<br>좋은 일에 좋은 일이 더하여짐을 이르는 사자성어는 무엇입니까?</label>
      <br>
      <input type="text" id="fourletters" name="answer" minlength="1" maxlength="4" required>
      <br>
      <input type="submit" value="제출하기">
    </form>
  </body>
</html>

 

코드 설명

  • <form action="/ex.html" method="post"> exhtml로 post 방식으로 정보를 보내라
  • <label for="fourletters"> 오늘의 문제
  • <input type="text" id="fourletters" name="answer" minlength="1" maxlength="4" required> 타입은 문자로 지정, id는 상위의 label과 짝을 이루기 위해 fourletters로 설정, name는 식별을 쉽게 하기 위해 answer로, 최소 문자 길이를 1로 지정하고 최대 문자 길이를 4로 지정, 반드시 뭔가 적어야 다음 화면으로 넘어갈 수 있게 required를 적어줌.
  • <input type="submit" value="제출하기"> 제출 버튼

 

실행 모습

이렇게 나오는 군요!

 

 

네 글자 초과는 절대 적어지지 않습니다. 

 

 

오늘의 느낌

그래서 정답은 뭘 까요?ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

금상첨화

'HTML' 카테고리의 다른 글

[HTML] Header and Nav  (0) 2021.11.26
[HTML] Matching a Pattern  (0) 2021.11.25
[HTML] Set a Minimum and Maximum  (0) 2021.11.23
[HTML] Requiring an Input  (0) 2021.11.22
[HTML] Submit Form  (0) 2021.11.21
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함