들어가기에 앞서..
오늘은 사람들과 상호작용하기 위한 폼태그에 대해 배워봅니다.
https://poiemaweb.com/html5-tag-forms 글을 참조하였으며
제가 보기 편하게 수정을 하였습니다.
오늘은 무엇을 배울까 ?
폼태그
form 태그
form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.
input 태그
input 태그는 사용자로부터 데이터를 입력하게 할수 있다.
type 어트리뷰트에 의해 다양한 종류를 사용할수 있다.
서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.
type 어트리뷰트 값
button : 버튼 생성
value 값은 버튼 안의 텍스트 이고 onclick 은 클릭하면 반응하게 될 결과 값이다.
<input type= "button" value="click" onclick="alert('click!')">checkbox: 체크박스
value값은 안줘도 작동하는 것 같다. checked 속성은 입력하면 체크되어 있다. name 값은 .class와 같이 사용되는 것 같다.
<input type= "checkbox" value="1" checked> 1
<input type= "checkbox" > 2 1
2
color : 컬러 생성
색상을 선택할수 있게 한다 .
value와 name값은 옵션 인듯 싶다.
<input type= "color" value="red" name="red">date : date control (년월일) 생성
년, 월, 일을 생성할수 있다. datetime은 년월일시분초 생성할수 있는데 직접 입력하는 것 같다. datetime-local은 년월일시분초를 설정할수 있다.
<input type="date">
<input type="datetime">
<input type="datetime-local">email : 이메일 입력
subumit 시 자동 검증한다.
<input type="email">file:파일 선택
자신의 컴퓨터에서 파일을 선택하여 첨부할수 있다.
<input type="file">hidden : 입력 감추기
입력한 내용을 감추는 것 같다. 사용자에게는 표시되지 않는다.
<input type="hidden">image : 이미지로 된 submit button을 생성
자신이 지정한 이미지의 버튼을 생성할수 있다.
image 어트리뷰와 같은 방식으로 지정한다.
<input type="image" src="#">month 월 선택
년도와 월이 지정 가능하다.
<input type="month">number : 숫자 입력
숫자만 입력 가능한 빈칸을 생성한다.
min과 max를 지정할수 있다. min과 max를 넣으면 그 사이의 값을 작성할수 있다. step은 숫자 간격. 입력한 값만큼 더해서 올라간다.
value는 디폴트 값이 4로 적혀있게한다.
<input type="number" min="5" max="10" step="2" value="4">password : 암호 입력
암호를 입력한다. 암호는 보이지 않는다.
<input type="password" value="adsf">radio : radio button 생성
선택 버튼을 생성한다. 값은 input을 닫고 작성한다.
name을 같게 입력하지 않으면 두개다 선택할수 있다.
<input type="radio" name="point" value="1">1
<input type="radio" name="point" value="2">21
2
range:범위 선택
범위 게이지바를 넣을수 있다.
<input type="range" max="10" min="2" step="1" value="5">reset : 초기화 button 생성
초기화 버튼을 생성한다.
<input type="reset">search : 검색어 입력
검색 입력란을 생성한다
<input type="search" value="google.com">submit : 제출 button 생성
제출 버튼을 생성한다.
<input type="button" value="입력">tel : 전화번호 입력 form 생성
전화번호 입력이지만 글자도 입력이 된다.. 아래부터는 type만 변경해보았다.
<input type="tel">text : 텍스트 입력 form 생성
<input type="text">time : 시간 선택 form 생성
<input type="time" >url : url 입력 form 생성
value값을 주면 변경이 안된다.
<input type="url" value="입력">week : 주 선택 입력 form 생성
<input type="week" >많은 내용으로 폼파트는 충분히 더있지만 글이 길어질것 같아서 폼 태그 2로 작성해보도록 하겠다.
