html에서 태그는 사용자에게 정보를 입력 받고 처리하는데 사용된다. 에 작성 가능한 속성값 5개를 소개하겠다.
1. method: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다. 속성값=> get, post
2. name: 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다.
3. action: 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
4. target: action 속성에서 지정한 스크립트 파일을 현재창이 아닌 다른 위치에서 열도록 한다.
5. autocomplete: 예전에 입력한 값을 토대로 자동완성을 해준다. (default값이 on이므로 비밀번호를 입력할때는 off로 작성해준다.)
하나의 form안에서 영역을 나눌 때는 을 사용하고 각 fied에 제목을 붙일 때는 를 사용해준다.
See the Pen Untitled by Te___ho (@xogh8755) on CodePen.
사용자에게 입력을 받을 때는 태그를 사용한다. 과 함께 을 많이 사용한다. 이름과 같이 입력에 라벨을 붙여주는것이다. 우리가 회원가입을 할 때 아이디 입력창 옆에 "아이디: "와 같은 부분을 의미한다. 이와 같이 작성하는 방법은 두가지가 있다.
아이디 6자 이상: 이처럼 하나로 묶는 방법이 있다. 아이디 6자 이상: 이처럼 작성하면 label과 input이 떨어져 있어도 연결시킬수 있다는 장점이 있다. 조건은 label에서 for의 속성값과 input의 id 속성값이 같아야만 한다.
입력 받을 내용에 따라 input의 type속성에 작성할 속성값이 달라진다.
text 한줄짜리 텍스트 password 비밀번호 search 검색내용 url 주소 email 이메일 tel 번호 checkbox 여러항목 중 선택 복수선택 radio 여러항목 중선택 number 숫자조절 스핀박스 range 슬라이드 막대 date 날짜 month 날짜 submit 제출하기 reset 초기화 image 제출하기 button 버튼 file 파일 등록 hidden 사용자에게 보이지 않는 값 (개발자만 필요한 값)
아이디, 비밀번호를 입력할 때 text, password를 사용하며 속성 size, value, maxlength, minlength를 사용하면 효과적이다.
헷갈리거나 중요한 type을 부가 설명을 해보겠다.
checkbox, radio
checkbox는 복수 선택이 가능하며 radio는 단일 선택만 가능하다. 둘 다 input에 value 속성을 필수로 작성해야하는데 사용자가 고른것을 바탕으로 서버에 보낼 값을 지정하는 것이다. radio를 사용할 때는 name의 속성값을 동일하게 작성해야 단일 선택이 가능하다.
checked 속성을 작성하면 초기에 체크되어있을 항목을 설정한다.
from http://te-ho.tistory.com/6 by ccl(A) rewrite - 2021-11-07 18:27:54