오늘의 코드잇 학습일기 시작~ 폼 태그에 관련된 강의였는데, 우리가 흔히 볼 수 있는 로그인, 회원가입 등 페이지와 관련이 많은 내용이었다.
폼(Form)
웹사이트에서 내용을 적는 부분을 폼(Form)이라고 한다. 폼의 구조를 살펴보자면, 가장 먼저 내용을 입력하는 칸을 인풋(Input)이라고 부르며, 각 인풋 옆에 있는 이름을 라벨(Label)이라고 부른다. 그리고 버튼(Button)은 누르면 입력한 데이터를 전송 or 저장하는 역할을 한다. 클래스101의 로그인 화면을 예제로 확인해보도록 하자.
폼(Form)을 만드는 방법
먼저 폼을 만들려면 <form> 태그로 감싸 주어야 한다. 그 안에 <input> 태그를 넣는다. 미리보기를 실행해 보면 사용자가 내용을 입력할 수 있는 칸이 하나 생긴 것을 확인할 수 있을 것이다. 참고로 <input> 태그는 종료 태그 없이 사용한다. 그 다음 <label> 태그로 이름을 지정해 준다.
위와 같이 인풋 태그에 아이디값을 넣어 주고, 라벨 태그에 for 속성을 사용해서 input과 연결해 준다. 그렇게 하면 라벨을 클릭할 때마다 연결된 인풋으로 이동하여 포커스 되고 커서가 생긴다.
name 속성은 폼 태그가 데이터를 전송할 때, 각 데이터의 이름으로 사용하는 속성이다. 비밀번호 인풋을 만들었는데, 입력한 데이터가 다 보여서 조금 이상하다. 이럴 때에는 type 속성을 이용해서 비밀번호 부분을 숨길 수 있다.
type="password" 속성을 입력하였더니 비밀번호가 제대로 가려졌다. (만족😎)
버튼(Button)을 만드는 방법
인풋, 라벨을 만들었으니 마지막으로 버튼(Button)도 만들어 보자. <button> 태그가 폼 안에 위치해 있으면, 눌렀을 때 입력한 내용을 전송하는 역할을 한다.
버튼에는 몇가지 type 속성을 지정할 수 있는데 차례대로 알아보자.
- type="button" 이라고 입력하면 눌러도 데이터가 전송되지 않는다.
- type="submit" 이라고 입력하면 버튼을 눌렀을 때 데이터를 전송한다. (submit이 기본값)
- type="reset" 이라고 입력하면 눌렀을 때 내용을 초기화한다.
만약 버튼이 폼 태그 바깥에 위치해 있다면 폼의 내용을 전송하거나 리셋하지는 않는다.
이상으로 오늘은 폼의 구성, 인풋, 라벨, 버튼을 만드는 태그에 대해서 공부했다. 오늘 공부를 인증하며 학습일기 끝!
'퍼블리싱 & 프론트엔드 > html & CSS' 카테고리의 다른 글
| 다른 코드 불러올 때 사용하는 <link>, <script> 태그 (0) | 2023.05.02 |
|---|---|
| 코드잇 학습일기 Day17. 폼 태그 속성, 인풋 태그 종류와 속성 (0) | 2023.04.25 |
| 코드잇 학습일기 Day15. 아이프레임(iframe) (0) | 2023.04.22 |
| 코드잇 학습일기 Day14. 멀티미디어(이미지, 비디오, 오디오) (0) | 2023.04.21 |
| 코드잇 학습일기 Day13. 테이블 태그와 스타일링 (0) | 2023.04.12 |
댓글