[ HTML 웹 문서] '폼 삽입' 학습하기
[ 폼(Form) ]
사용자가 웹 페이지 내에서 '웹 사이트'로 정보를 보내기 위해
사용자의 입력을 받을 수 있는 모든 구성요소
'폼'과 관련된 대부분의 작업들은 '정보'를 저장하거나 검색하거나 수정하는 일을 수행한다.
>> 데이터베이스를 기반으로 한다.
아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 "HTML 태그"를 이용
폼에 입력한 사용자 정보를 처리하는 것은 "ASP"나 "PHP" 같은 "서버 프로그래밍"을 이용
[ 폼(Form) 삽입하기 ]
<form> 태그
폼을 만드는 기본 태그 <form>과 </form> 사이에 여러 폼 요소를 삽입
>> <form> 태그에 <input> 태그를 넣을 수 있다.
'기본형'
<form 속성="속성값">여러 폼 요소</form><form> 태그의 속성
메서드(method) : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정
HTTP 프로토콜에는 사용되는 메서드가 존재한다.
>> 그중에서 폼(form)에서 사용할 수 있는 속성값은 'get'과 'post'만 사용된다.
get : 데이터를 256~4096byte까지만 서버로 넘길 수 있다.
>> 큰 수이지만 이미지와 영상 데이터를 담기에는 부족하다.
주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있다.
post : 입력한 내용의 길이에 제한받지 않고, 사용자가 입력한 내용도 드러나지 않는다.
action : <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
>> 서버 프로그램의 주소가 들어갈 '메서드'이다.
<fieldset> 태그
폼 요소를 그룹으로 묶는 태그
'기본형'
<fieldset 속성="속성값"> ~ <fieldset>
<legend> 태그
그룹으로 묶는 구역에 제목을 붙이는 태그
'기본형'
<fieldset>
<legend>그룹 이름</legend>
<fieldset><legend> 태그 예시
<body>
<form action="">
<fieldset>
<legend>상품 이름</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</form>
</body>
<label> 태그
<input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용
<label> 태그 예제 1
<label> 태그 안에 <input> 태그 넣기
'기본형'
<label>레이블명<input></label>👇👇
<body>
<label>아이디(6자 이상)<input type="text"></label>
</body>
<label> 태그 예제 2
<label> 태그와 폼 요소를 따로 쓰고 연결하기
'기본형'
<label for="id명">레이블명<input id="id명"></label>>> 'label'에 들어 있는 'for'의 "id명"과
<input> 태그 안의 "id명"의 값을 똑같이 설정하여야 한다.
>> for 속성을 사용하여 다른 요소와 결합한다.
👇👇
<form action="">
<label for="username">아이디: </label><input type="text" id="username" value="test"> <br>
<label for="pw">비밀번호: </label><input type="password" id="pw">
</form>
'label'에 type속성의 "text", "password"를 사용하면
'아이디'의 라벨과 '비밀번호'의 라벨에
값을 입력했을 때 각각 보이는 형식이 다른 것을 볼 수 있다.
<body>
<form action="">
<label for="username">아이디: </label><input type="text" id="username" value="test"> <br>
<label for="pw">비밀번호: </label><input type="password" id="pw"> <br>
<input type="checkbox" id="chk1"><label for="chk1">축구</label>
<input type="checkbox" id="chk2"><label for="chk2">야구</label>
<input type="checkbox" id="chk3"><label for="chk3">족구</label>
<input type="checkbox" id="chk4"><label for="chk4">농구</label>
</form>
</body>위의 'HTML'을 실행시키면 아래의 화면이 출력된다.
정확한 값의 식별을 위해 'id'는 단 한개만 연결할 수 있다.
'checkbox'는 주어진 여러 항목에서 2개 이상을 선택할 수 있다.👇
'label'에 type속성의 "checkbox"를 사용하면
체크박스를 사용할 수 있다.
이 처럼 <form> 요소 내부에서 <input> 태그의 'type'속성을 통해 사용자로부터
입력을 받을 수 있는 여러 필드(filed)에 대해 다음 시간에 알아볼 것이다.
지금까지 [ HTML ] 웹 문서 '폼(form) 삽입하기'에 대해 알아보았습니다.
다음 포스팅에서는 [ HTML ] 웹 문서 '<input> 태그의 type 속성'에 대해 알아보겠습니다.
❤긴 글 읽어주셔서 감사드립니다❤
'웹개발 > 웹 개발[프런트엔드-VSCode]' 카테고리의 다른 글
| 프론트엔드 [ HTML 웹 문서 ] <input> 태그의 type속성 1 (2) | 2022.12.26 |
|---|---|
| 프런트엔드 [ HTML 웹 문서 ] 오디오/비디오 & 하이퍼링크 삽입하기 (2) | 2022.12.22 |
| 프런트엔드 [ HTML 웹 문서 ] 이미지 삽입하기 (0) | 2022.12.22 |
| 프런트엔드 [ HTML 웹 문서 ] 표 만들기 (0) | 2022.12.22 |
| 프런트엔드 [ HTML 웹 문서 ] 목록 만들기 (0) | 2022.12.21 |