HTML 태그(3) - Form 관련 요소(1)

• 폼 관련 요소들
  • 서버에 데이터를 전달하기 위한 요소들
  • 예시 : 회원가입, 이벤트 프로모션
• INPUT 요소
  • 대표적인 폼요소로, 다양한 Type 속성으로 여러 종류의 입력 양식을 나타냄
  • 사용되는 Type : text, password, radio, title, image, submit, reset, button

<input type =" ">

 

• Text

<input type = "text" placholder ="ID를 입력하세요">

• 주로 아이디, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용
• placeholder 속성 : 사용자가 입력하기전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표현할 수 있습니다.(사용자가 값을 입력하면 사라집니다.)

ID :<input type="text" placeholder="영문으로만 써주세요" id = "userid"><br>

 

• 결과

ID :

 

 

• Password

Password : <input type="password"><br>

• 암호와 같이 공개할 수 없는 내용을 입력할 때 사용
• 화면에는 text와 같이 나타나지만 실제로 입력할 때 값을 노출하지 않음
• 서버에 전달할 때 실제 값이 전달될 때만 입력한 값이 넘어감

 

• 결과

Password :

 

 

• Radio

<!-- type = "radio" --> 
<!-- checked boolean 속성으로 사용자가 선택하지않아도 기본값으로 나오게하는 속성  -->
Gender : 남자<input type="radio" name="Gender" id ="male" checked> 
여자 <input type="radio" name="Gender" id ="female"><br>

• radio 버튼을 만들 때 사용
• 라디오 버튼은 중복 선택이 불가능 하며 하나의 항목만을 선택
• name 속성으로 묶어서 같은 속성 값을 가지게 해야만 중복선택이 불가능 해짐 (같은 속성 값으로 안 묶어주면 브라우저는 radio 버튼들이 같은 그룹에 속해있는 지 알 수 없다.)
• checked 속성을 통해 디폴트 값을 설정( checked 속성을 부여할 경우 사용자가 선택하지 않아도 초기값으로 설정 되어있음)

 

• 결과

Gender : 남자 여자

 

 

• checkbox

<!-- type = "checkbox" -->
Hobby : 
영화 <input type="checkbox" name="hobby" checked id="movie">
음악 <input type="checkbox" name="hobby" id = "music">
독서 <input type="checkbox" name="hobby" id = "read">
축구 <input type="checkbox" name="hoby" id = soccer>
야구 <input type="checkbox" name="hoby" id = "baseball"><br>

• 체크박스를 만들 때 사용
• radio 버튼과 다르게 중복 선택을 허용
• radio 버튼과 마찬가지로 name 속성으로 같은 checkbox인 것을 그룹으로 묶어야함.
• radio 버튼과 마찬가지로 checked 속성을 사용.(name과 checkbox 설명은 위 radio 버튼에 설명이 있음)

 

 

• 결과

Hobby : 영화 음악 독서 축구 야구