HTML 실무 필수! 폼 태그 완벽 마스터로 사용자 상호작용 능력 UP!
HTML 폼: 사용자랑 소통하는 방법
HTML 폼은 웹사이트에서 사용자의 정보를 받거나 서버로 보낼 때 쓰는 양식이야. 로그인 화면에서 아이디, 비밀번호 입력하는 칸, "로그인 유지" 체크박스, 보안 설정 라디오 버튼, 그리고 로그인 버튼 같은 것들이 전부 폼 요소들이지.
폼은 어떻게 만들까?
폼을 만들려면 <form> 태그를 써야 해. 마치 HTML 문서 전체를 <html> 안에 넣는 것처럼, 폼과 관련된 모든 요소들은 <form> 태그 안에 넣어줘야 해.
<form> 태그는 혼자 쓸 수도 있지만, action이나 method 같은 속성을 같이 쓸 수 있어.
action속성: 폼에 입력한 정보를 어디로 보낼지 정하는 거야. 서버 주소를 적는다고 생각하면 돼.method속성: 정보를 보낼 때 어떤 방식으로 보낼지 정하는 거야. (GET, POST 등)
이 action이랑 method 속성은 사실 웹사이트를 만드는 사람(프론트엔드 개발자)보다는 서버를 만드는 사람(백엔드 개발자)에게 더 중요해. 그래도 폼을 만들 때 이 속성들을 비워두더라도 같이 써주면 나중에 협업할 때 훨씬 편해.
폼 안에 들어가는 다양한 요소들
폼 태그를 만들었으면 이제 안에 들어갈 여러 가지 상호작용 요소들을 배워볼 거야.
1. <input> 태그: 만능 입력 도구
<input> 태그는 정말 다양한 역할을 하는 특별한 태그야. type 속성에 어떤 값을 넣느냐에 따라 역할이 달라져.
type="text": 한 줄짜리 텍스트를 입력받을 때 써. 아이디나 검색창 같은 곳에 많이 쓰여.type="password": 비밀번호를 입력받을 때 써. 입력하면 내용이 점으로 가려져서 보여.type="checkbox": 여러 개 중에 선택할 수 있는 체크박스를 만들 때 써.type="radio": 여러 개 중에 딱 하나만 선택할 수 있는 라디오 버튼을 만들 때 써.type="submit": 폼을 제출하는 버튼을 만들 때 써.type="button": 그냥 클릭만 할 수 있는 버튼을 만들 때 써.type="file": 파일을 업로드할 때 쓰는 버튼을 만들 때 써.type="date": 날짜를 선택하는 입력 칸을 만들 때 써.
이 외에도 <input> 태그에는 정말 많은 type 값들이 있는데, 자주 쓰는 것들 위주로 익혀두면 돼.
2. <label> 태그: 입력 칸에 이름 붙여주기
<label> 태그는 입력 칸이 어떤 용도인지 설명해주는 역할을 해. 그냥 텍스트만 써놓는 것보다 <label> 태그를 쓰면 더 의미 있게 코드를 작성할 수 있어.
<label> 태그는 두 가지 방법으로 쓸 수 있어.
- 명시적인 방법:
<label for="아이디값">이렇게 쓰고, 입력 요소에는id="아이디값"이렇게 연결해주는 거야. 이렇게 하면label텍스트를 클릭해도 입력 칸이 활성화돼서 편리해. - 암묵적인 방법:
<label>태그 안에 입력 요소를 직접 넣는 거야. 이렇게 해도label텍스트를 클릭하면 입력 칸이 활성화돼.
어떤 방법을 써도 상관없으니 편한 대로 사용하면 돼.
3. <fieldset> & <legend> 태그: 요소들 그룹으로 묶기
여러 개의 폼 요소를 하나로 묶어서 보여주고 싶을 때 <fieldset> 태그를 써. 그리고 그 그룹의 이름을 붙여주고 싶을 때 <legend> 태그를 써. 예를 들어 "기본 정보" 그룹, "선택 정보" 그룹처럼 나눌 수 있지.
4. <textarea> 태그: 여러 줄 입력받기
한 줄만 입력받는 <input type="text">와 달리, <textarea> 태그는 여러 줄의 글을 입력받을 때 써. 긴 글이나 댓글을 남길 때 유용해.
5. <select> 태그: 목록에서 선택하기
<select> 태그는 여러 개의 옵션 중에서 하나를 선택할 수 있는 목록을 만들 때 써.
<option>태그:<select>태그 안에 들어가서 실제 선택할 수 있는 항목들을 만들어줘.value속성: 실제로 서버로 보낼 값을 정하는 거야. 화면에는 한글로 보이지만, 서버로 보낼 때는value값으로 보내져.
<optgroup>태그: 옵션들을 주제별로 묶어서 보여줄 때 써.label속성으로 그룹 이름을 붙일 수 있어.
<select> 태그는 size 속성으로 몇 개의 항목을 보여줄지 정하거나, multiple 속성을 사용해서 여러 개를 선택하게 할 수도 있어.
selected속성: 특정 옵션을 기본으로 선택되게 하고 싶을 때 써.
6. <button> 태그: 버튼 만들기
<input type="submit">이나 <input type="button">으로도 버튼을 만들 수 있지만, <button> 태그를 쓰는 게 더 좋아. <button> 태그가 버튼을 만들기 위해 더 개선된 태그이기 때문이야.
폼 요소들의 공통 속성
폼 요소들은 각각의 역할 외에도 공통적으로 사용할 수 있는 속성들이 있어.
disabled속성: 입력 요소를 비활성화해서 사용자가 클릭하거나 내용을 수정하지 못하게 할 때 써.readonly속성: 입력 요소의 내용을 볼 수는 있지만 수정은 못하게 할 때 써.maxlength속성: 입력할 수 있는 글자 수를 제한할 때 써.checked속성: 체크박스나 라디오 버튼이 기본적으로 선택되게 할 때 써.placeholder속성: 입력 칸에 어떤 내용을 입력해야 하는지 힌트를 보여줄 때 써. 내용을 입력하면 자동으로 사라져.
이 외에도 다양한 속성들이 있지만, 이 정도만 알아도 실무에서 폼을 다루는 데 큰 어려움은 없을 거야. 책이랑 같이 보면서 직접 코드를 작성해보는 게 중요해!