$$config title: HTML form 태그(입력양식태그) keywords: - IT - HTML $$ -[태그 공부링크](https://www.tcpschool.com/html-tags/input) # fieldset 태그 : form 내부 실제 입력태그의 테두리로 사용 / legend 태그 : 테두리에 삽입되는 제목 형식 ![출력결과](https://i.imgur.com/oJxF780.jpg) ## fieldset 태그의 속성 - disabled : fieldset 태그의 자식 요소를 사용할 수 없음/ 화면에 표시만 되고 입력 또는 선택 즉 비활성화가 됨 - form : 현재 속해 있는 form의 이름을 표시할 수 있음 - name : 서버로 넘겨줄때의 이름을 설정 - # form 태그 ```js

``` - 무언가를 출력하는 태그가 아닌 덩어리로 묶어서 서버로 보내기 위해 사용되는 태그라고 볼 수 있다. ## form 태그 정리 - 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그 - 웹 페이지에서의 입력 양식태그 (웹사이트에 어떠한 정보를 보낼 수 있는 요소들을 명칭) - 로그인 창이나, 회원가입 폼 등이 이에 해당 - 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리한다. - 실제로 사용자가 양식을 입력하기 위한 태그는 input 태그를 사용 ## form 태그 속성 - action : 웹 서버전송을 할 수 있게 하는 파일 삽입 - onsubmit 이벤트로 action속성 지정하지 않고 스크립트로 처리 가능 - method : 폼 전송방식 - get:256 ~4,096 바이트의 정보만 서버로 보냄 - post : 사용자의 입력내용 길이에 제한이 없음 - name : 폼의 이름 (GET / POST) - taget : action에서 지정한 스크립트 파일을 현재창이 아닌 다른 위치에서도 열도록 지정함 - _blank - _self - _parent - _top ---- - enctype : 폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시함 (단, form 요소의 method 속성값이 “post”인 경우에만 사용할 수 있음) - novalidate : 폼데이터가 서버로 제출될 때 해당 데이터의 유효성을 검사하지 않음을 명시함 - autocomplete : form 요소에서 자동 완성 기능을 사용할지 여부를 명시함. - accept-charset : 폼 데이터(form data)가 서버로 제출될 때 사용되는 문자 인코딩(character encoding) 방식을 명시함. ## form 태그 동작 설명 ![설명](https://i.imgur.com/3AQkv7l.jpg) # input 태그 ```js ``` ## input 태그 - input 태그는 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용 - input 요소는 사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 form 요소 내부에서 사용 - 이러한 입력 필드는 input 요소의 type 속성값을 달리함으로써 여러 가지 모양으로 나타낼 수 있습니다. - input 요소는 빈 태그(empty tag)이며, 속성만을 포함하고 있습니다. - label 요소를 사용하면 input 요소의 라벨(label)을 정의할 수도 있습니다. ## input 태그 속성 종류 ![속성이미지](https://i.imgur.com/ay5cVzh.png) ## input 속성 : type - 속성값 ![설명](https://i.imgur.com/6Yqo69n.jpg) ## input type 속성 출력값 - type="text" ![결과출력](https://i.imgur.com/0hCNu8Z.jpg) --- - type="passweord" ![결과출력](https://i.imgur.com/rP1DMX3.jpg) --- - type="checkbox" : 체크박스 폼에서는 value라는 속성 값을 사용하는데, 값을 받기 위해 꼭 사용하여야 하며 value 속성을 명시하지 않으면 빈 값이 전송된다. ![결과출력](https://i.imgur.com/DicXfL3.jpg) - checked 옵션을 사용하면 기본적으로 체크된 상태로 표시가 가능 --- - type="radio" : 라디오 버튼은 체크박스와 마찬가지로 이미 나열된 보기를 선택할 수 있는 기능을 가지고 있으며, 복수 선택이 가능한 체크박스와는 다르게 라디오 버튼은 1개만 선택할 수 있다. - 같은 name 으로 그룹설정이 되었을 경우 그룹안에서 1개만 선택 가능 name 속성 미입력 시 1개 선택 후 다른 것을 선택 할 수 없다. ![결과출력](https://i.imgur.com/7CQNOvi.jpg) --- - type="button" : 눌렀을 때 이벤트가 발생하는 버튼을 생성 ![결과출력](https://i.imgur.com/e7hXt2n.jpg) --- - type="file" ![결과출력](https://i.imgur.com/f2LGazp.jpg) --- - type="search" : 검색어 입력 폼은 검색어 입력 시 오른쪽에 [x] 버튼이 생성되고 [x] 버튼을 누르면 입력한 검색어가 사라진다. ![결과출력](https://i.imgur.com/UK6k9Gh.jpg) --- - type="reset" : 입력값 초기화 ![결과출력](https://i.imgur.com/fcucxXX.jpg) --- - type="submit" : 입력한 값들을 form의 action 속성에 입력된 페이지로 전송한다. ![결과출력](https://i.imgur.com/R80uJQl.jpg) --- - type="email" : 이메일 주소의 규칙인 @(at)과 도메인이 없다면 유효성에 어긋나기 때문에 submit 버튼을 눌러도 제출되지 않는다. ![결과출력](https://i.imgur.com/dKyJkE1.jpg) --- - type="URL" : 입력이 URL 형태를 갖추지 않는다면 유효성에 어긋나기 때문에 submit 버튼을 눌러도 제출되지 않는다. ![결과출력](https://i.imgur.com/hO9Yb4i.jpg) --- - type="number" : 스마트폰의 경우 이 입력 폼을 사용한다면 키보드의 숫자 키 패드가 나오게 하기 위해 pattern="\d*" 를 사용해야 합니다. 오른쪽 화살표 모양을 클릭하여 +1, -1을 해줄 수 있습니다. ![결과출력](https://i.imgur.com/XaruFLL.jpg) --- - type="color" ![결과출력](https://i.imgur.com/vW9yAmE.jpg) --- - type="range" : 슬라이드 방식의 인터페이스. 최솟값, 최댓값, 이동 단위도 조정 가능 ![결과출력](https://i.imgur.com/72Pkz6r.jpg) --- - type="datetime-local" : 사용자가 있는 지역을 기준으로 날짜와 시간 (연, 월, 일, 시, 분, 초) ![결과출력](https://i.imgur.com/urCdbGf.jpg) --- - type="date" ![결과출력](https://i.imgur.com/NmeYqOr.jpg) --- - type="month" ![결과출력](https://i.imgur.com/bg7svfc.jpg) --- - type="week" ![결과출력](https://i.imgur.com/5uJE6yT.jpg) --- - type="time" ![결과출력](https://i.imgur.com/R5FAMCF.jpg) --- - type="image" : 버튼역활을 하지만 내가 만든 이미지를 삽입하여 버튼을 표시해준다. ![결과출력](https://i.imgur.com/nkT8GrU.jpg) --- # input 태그에 placeholder 설정 - input 태그에서 placeholder 속성을 사용하면 입력창에 어떤 내용을 입력해야 하는지 알려줄 수 있으며, 해당 입력창에서 입력 시 자동으로 사라지므로 매우 편리한 기능입니다. - placeholder 설정 시 ![결과출력](https://i.imgur.com/5qxAxXV.jpg) --- # lebel 태그정리 - label 태그는 input 태그와 같이 사용된다. - ex) 성별을 선택하는 기능을 만들기 위해 라디오 박스 사용 시 해당 라디오 박스가 의미하는 바를 사용자가 알 수 있게 명칭을 부여할 때 label 태그를 사용한다 - label 태그의 for 속성과 input 태그의 id값을 같게 하면 label 태그를 클릭한 것만으로도 해당하는 input 태그를 클릭하는 것과 같은 효과를 같는다. - 작성방법 ```js 명칭 ``` ![결과출력](https://i.imgur.com/VlG4NMD.jpg) # input 외 추가 입력태그 정리 ## textarea 태그(텍스트 영역) - input 텍스트는 한줄 삽입이지만 textarea를 활용한다면 여러줄의 텍스트를 삽입할 수 있다. - 가로크기와 세로크기를 근시의 갯수, 줄의 갯수로 크기 확인 가능 ```js

``` ![출력값](https://i.imgur.com/f9aPTJV.jpg) # select 태그 (드롭다운 목록태그) - select 태그는 주로 회원 가입할 때 생년월일을 선택할 때 사용된다. - 여러 개의 항목을 생성하기 위해서는 value가 담긴 option 태그를 사용해야 한다. - 속성 - multiple : 기본적으로 다중선택불가 다중선택을 활성하하려면 속성활성화 - size : 속성 활성화 하여 숫자 입력 시 한번에 보여지는 선택지로 활성화 가능 - 작성방법 ```js ``` ![결과출력](https://i.imgur.com/JOrbr3C.jpg) # select 그룹 활성화 - 작성방법 ```js ``` ![결과출력](https://i.imgur.com/6HHRArx.jpg)