티스토리 뷰

HTML

[HTML] Requiring an Input

Dongi 2021. 11. 22. 15:30

안녕하세요 동기 여러분! 오늘은 필수 입력란을 만드는 방법에 대해 알아봅시다.

 

Requiring an Input

회원 가입 같은 거 할 때 반드시 적어야 하는 필수 사항들이 있습니다. 아이디, 비밀번호, 이메일, 이름 등등이 있는데요, 적지 않고 가입을 누르면 적으라고 경고문이 뜨게 됩니다. 오늘은 그것을 만드는 방법을 배워 봅시다!

 

 

생김새

<!DOCTYPE html>
<html>
  <body>
    <form action="/main.html" method="post">
      <label for="name">성명을 입력해주십시오.</label>
      <br>
      <input id="name" name="name"  placeholder="여기에 입력해주세요." required>
      <br>
      <input type="submit" value="제출">
    </form>
  </body>
</html>

실행 화면

 

 

아무것도 입력 하지 않고 제출을 하면 

 

제발 이 공간을 채워주세요???

 

이렇게 오류가 뜨면서 화면이 넘어가지 않습니다.

 

코드 설명

  • <form action="/main.html" method="post"> main.html 파일에 post 방식으로 내용을 보내겠다.
  • <label for="name">성명을 입력해주십시오.</label> 빈칸에 대한 설명
  • <br> 줄바꿈
  • <input id="name" name="name"  placeholder="여기에 입력해주세요." required> label의 for 값과 input의 id의 값은 짝을 지어주기 위해 통일, name은 식별을 위해 name으로 적어주고 빈칸에 여기 입력해달라고 적어두기 위해 placeholder 사용 required를 적어 오늘의 주인공 등장 두둥! 얘를 적어두면 사용자가 반드시 무언가 입력을 하고 제출해야 화면이 넘어감.
  • <input type="submit" value="제출"> input의 submit 타입 "제출"로 버튼을 만들어줌.

 

오늘의 느낌

운동을 쉬는 날이었습니다. 아주 편안ㅋㅋ

'HTML' 카테고리의 다른 글

[HTML] Checking Text Length  (0) 2021.11.24
[HTML] Set a Minimum and Maximum  (0) 2021.11.23
[HTML] Submit Form  (0) 2021.11.21
[HTML] Textarea element  (0) 2021.11.21
[HTML] Datalist Input  (0) 2021.11.20
공지사항
최근에 올라온 글
최근에 달린 댓글
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
글 보관함