HTML&&CSS

HTML태그(5) -Form 관련 태그(4)

꽃달린감나무 2022. 5. 19. 20:03
728x90
  • <select> 
사는 지역 :<select id ="local">
				<option>서울</option>
				<option>경기</option>
				<option>충청</option>
				<option selected>제주</option>
				<option>강원</option>
				<option>전라</option>
			</select><br>
  • 선택 목록 상자 또는 콤보 박스라고 불림
  • 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그
  • multiple 속성 : select의 경우 한 개만 선택할 수 있지만, multiple 속성을 사용할 경우 다중 선택이 가능해짐
  • <select> 태그 내부에 <option>를 사용해 각 항목을 나타냄
  • selected : <option> 태그 내에 사용하는 속성으로 radio, checkbox 의 checked 처럼 초기 값으로 설정되는 값

 

 

  • 결과

 

 

 

  • <textarea>
<!-- textarea -->
자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 간단하게 해주세요"></textarea><br>
  • 한 줄만을 입력할 수 있는 <input type="text" >와 달리 여러 줄의 텍스트를 입력할 때 사용
  • cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 수치의 의미는 평균적인 글자의 너비로 정확히 글자 수를 나타내지는 않음.)
  • rows : 세로 크기를 조절하는 속성 (화면에 보여지는 줄 수 뜻 함)

 

  • 결과
자기소개 :

 

 

  • <button>
<!-- type = "button" -->
<button type="submit">전송</button>
<button type="reset">취소</button>
<button type="button">버튼</button>
  • Type
    • submit : form 값을 전송하는 버튼
    • reset : form 값을 초기화하는 버튼
    • button : 아무런 기능이 없는 버튼(원하는 기능을 넣을 수 있습니다!)
    • input과 달리 빈 태그가 아니며 내용을 넣을 수 있음 ( 자유로운 스타일 표현이 가능)

 

 

  • 결과

 

 

 

  • <label>
<label for = "userid">ID : </label><input type="text" placeholder="영문으로만 써주세요" id = "userid"><br>
<label for="userpw">Password :</label> <input type="password" id = "userpw"><br>
  • <label>은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용.
  • 모든 form 요소에 사용 가능.
  • form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어줘야 함
  • <label>을 사용하면 이를 클릭했을 경우 해당 form 요소를 클릭한 것처럼 동작.(밑에 결과에서 ID를 클릭하면, text칸이 클릭된 것처럼 커서가 나옵니다!!)
  • 또한, 스크린 리더기를 통해 듣게 되면 해당 form 요소에 접근 시 <label>을 함께 읽어주게 됨.
  • <label>은 사용성, 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋음.

 

  • 결과


 

 

  • <fieldset>, <legend>
	<fieldset>
		<legend>필수정보</legend>
		...(생략)
	</fieldset>

	<fieldset>
		<legend>부가 정보</legend>
		...(생략)
	</fieldset>
  • 구조화 하기 위해 필요한 태그
  • <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용, 보통 form의 성격에 따라 구분(예를 들어, 회원가입할 때 필수정보와, 부가정보로 나뉘어요!!!!)
  • <legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성,  <fieldset>의 자식으로 반드시 최상단에 위치해야함

 

 

  • 결과
필수정보

Gender :
부가 정보 Hobby :


자기소개 :

 

 

 

  • <form>      
	<form action="./save.html" method="GET">
		<h1>Form 관련 요소</h1>
		...(생략)
		<input type="submit" value="submit"> <input type="reset" value="cancle"> <br>
	</form>
  • <form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할
  • <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할
  • 속성
    • action: 데이터를 처리하기 위한 서버의 주소
    • method: 데이터를 전송하는 방식을 지정
      • method 속성값 GET, POST 존재 ( 참조 : https://hidevelop.tistory.com/48 )
        • get 방식은 데이터가 전송될 때 URL에 파라미터 형태로 붙어 데이터가 노출
        • post 방식은 데이터가 전송될 때 데이터가 노출되지 않음

GET

GET -->> Gender, hobby 값 등이 url에 표시되었어요!!

POST

POST --->> url에 데이터가 표시되지 않아요!!!

 

 

  • 결과

 

Form 관련 요소

필수정보

Gender :
부가 정보 Hobby :


자기소개 :


 

728x90