반응형
이번 포스팅에서는 HTML의 또 다른 입력요소인 select 태그와 textarea 태그, form 태그에 대해 정리했습니다.
저번 포스팅에서 다뤘던 HTML의 입력요소인 input 태그에 대해 궁금하신 분은 아래를 읽어보시면 좋습니다!
HTML 기초 7편 - input (입력요소) 태그
이번 포스팅에서는 HTML의 입력요소인 input 태그에 대해 정리했습니다. 저번 포스팅에서 다뤘던 링크 태그 (a 태그)와 목록 태그에 대해 궁금하신 분은 아래를 읽어보시면 좋습니다! HTML 기초 6편 -
mlngwandev.tistory.com
select 태그
- 다수의 옵션 (선택지)를 포함할 수 있는 선택 메뉴이다.
- 메뉴 안에 포함되는 옵션은 option 태그를 사용하여 표시한다.
- 각각의 옵션에서 value 속성 지정이 가능하다.
- 식별자로 name을 사용한다.
value 속성 지정
실제로 처리될 값을 내타낸다.
select 태그 활용하기
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h2>select tag!</h2>
<select name="CellPhone">
<option value="iPhone">아이폰 14</option>
<option value="iPhonemini">아이폰 13 미니</option>
<option value="iPhonepro">아이폰 14 프로</option>
<option value="Galaxy23">갤럭시 S23</option>
</select>
</body>
</html>
결과
입력한 요소들이 선택 가능한 요소들로 표시되는 것을 확인 가능하다.
textarea 태그
- 여러줄의 텍스트를 입력 가능하게 한다.
- 식별자로 name을 사용한다.
input이 있는데 textarea를 왜 사용하나요?
input 태그는 한 줄 밖에 입력하지 못한다.
하지만 textarea 태그는 여러줄의 텍스트를 입력 가능하게 한다.
textarea 태그 활용하기
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h2>textarea tag!</h2>
<textarea>여기에 여러 문장을 입력해주세요!</textarea>
</textarea>
</body>
</html>
결과
여러 문장이 입력 가능한 영역이 생성되는 것을 확인 가능하다.
form 태그
- 사용자가 입력한 데이터 (입력값)을 서버로 보내기 위해 사용한다.
- 입력 요소들을 감싼다.
- 입력 값을 서버로 제출이 가능하다.
- 하나의 양식으로 활용한다.
- 입력 요소 개수가 다수여도 가능하다.
서버란? (= 호스트)
정보를 제공하는 주체
서버에 대해 궁금하다면 아래 포스팅을 참고하면 된다.
HTTP 기초 1편 - HTTP 이론 1
HTTP에 관한 짧은 지식들을 공부하게 되는 기회가 있어서 이렇게 블로그에 정리하게 되었습니다. 저는 백엔드 개발자를 지망하지만, 백엔드에 한정되어 공부 하는것보다 전체적인 흐름을 아는
mlngwandev.tistory.com
form 태그의 속성
- action : 입력값을 전송할 서버의 URL
- method : 클라이언트가 입력한 데이터를 어떤식으로 전송할지 여부 설정 (GET or POST)
GET과 POST
GET : 서버에 요청을 보내어 응답을 받아내는 것 = 서버로부터 정보를 가져오겠다는 요청이다.
POST : 서버에 요청을 보내어 작업을 수행하는 것 = 서버의 정보를 조작(추가/수정/삭제)하겠다는 요청이다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>form tag!</h1>
<h2>구매할 휴대폰 고르기</h2>
<form action="mlngwandev.tistory.com" method="POST">
<input type="text" placeholder="Cell-Phone-Number" name="number" />
<br />
<select name="cellphone">
<option value="iPhone14">iPhone14</option>
<option value="iPhone14Pro">iPhone14 Pro</option>
<option value="iPhone14ProMax">iPhone14 Pro MAX</option>
</select>
<br />
<input type="submit" value="제출" />
</form>
</body>
</html>
결과
위와 같이 다른 태그와 조합하고 form 태그를 활용해 서버로 전송이 가능하다는 사실을 확인 가능하다.
제출을 눌렀는데 오류페이지가 떠요!
임의로 설정한 URL이므로 오류페이지가 뜨는 것은 정상이다.
HTML의 또 다른 입력요소인 form 태그에 대해 알아보았습니다.
마지막 편에서는 HTML에서 사용하는 meta 태그와 viewport에 대해 알아보겠습니다.
반응형
'Frontend > HTML' 카테고리의 다른 글
| HTML 기초 9편 (마지막) - meta 태그와 viewport (0) | 2023.07.22 |
|---|---|
| HTML 기초 7편 - input (입력요소) 태그 (0) | 2023.07.10 |
| HTML 기초 6편 - 링크 태그(a 태그)와 목록 태그 (0) | 2023.07.09 |
| HTML 기초 5편 - 전역 속성 (0) | 2023.07.08 |
| HTML 기초 4편 - 이미지 태그와 컨테이너 태그 (0) | 2023.07.07 |
