사용되는 태그
<form> -정보 제출을 위한 태그를 포함한다. -입력된 데이터를 한 번에 서버로 전송한다. -autocomplete 속성을 통해 자동완성 여부를 설정할 수 있다.(기본값 = on) <input> -입력받는 요소 <label> -form의 요소에 이름을 붙이기 위해 사용한다. -label의 주요 속성은 for인데, for의 값과 사용하려는 요소의 id값이 같으면 연결된다. <button> -버튼 -type속성을 통해서 submit(제출), reset(초기화), button(기본동작없음)으로 사용한다. -button의 경우 javascript등으로 동작을 설정해줄 수 있다. <fieldset> -폼 태그 내에 입력요소와 라벨들을 그룹화 해주는 태그 -disabled 속성을 통해서 비활성화가 가능하다. <legend> -필드셋 요소의 제목 또는 설명사용예시
<body> <form>포켓몬스터 등록하기<br><br> <fieldset> <legend>포켓몬스터의 이름과 레벨 입력</legend> <label for="name">이름</label> <!--이름 입력칸과 연결 연결됨 --> <input type="text" id="name" name = "username"><br><br> <label for="level">레벨</label> <!--레벨 입력칸과 연결--> <input type="number" id="level" name="userlevel"><br><br> <button type="button">포켓몬 등록</button> </fieldset> </form> </body>실행결과
input태그의 속성
-input태그에는 입력을 받는 많은 타입들이 존재하는데, 다 사용해볼 순 없을 것 같아서 아래에 조금 사용 빈도가 있어보이는 요소 타입과 그에대한 속성들을 것들을 글로 정리해봤다.
텍스트 관련 타입
-text
-password
-search
-tel텍스트 관련 속성
-placeholder : 빈 칸 상태에서 보이는 안내문
-maxlength : 최대 길이 설정
-minlength : 최소 길이 설정
숫자 관련 타입
-number : 숫자
-range : 범위
-date : 날짜관련숫자 관련 속성
-min : 최소값
-max : 최대값
-step : 간격
체크박스 관련 타입
-checkbox : 여러개 선택이 가능하다.
-radio : 여러개 중에 하나만 선택이 가능(다른거 선택하면 기존에 선택되어있던거 체크해제)체크박스 관련 속성
-checked : 체크박스와 라디오 타입 둘다 사용 가능하며, 기본 체크 상태를 설정한다.
-name : 라디오박스처럼 묶기위해 사용한다.(묶기위한 요소들의 name을 맞춰줘야한다.)
-value : 라디오박스처럼 묶어 각 옵션마다 실제로 넘겨질 값을 지정한다.
기타 관련 타입
-file : 파일을 받아들이기 위해 사용된다.
-hidden : 사용자에게는 숨겨져야하지만 값은 넘겨지는 타입이다.
-email : 이메일형식을 입력받기 위해 사용된다.파일 타입의 속성
-accept : 받아들이는 파일 형식을 지정할 수 있다.
-multiple : 여러 파일 업로드 가능 여부를 지정한다.
대부분 공통적으로 사용되는 속성
-value : 기본값(입력 시 변경된다.)
-autofocus : 자동으로 해당 인풋요소에 포커스 시켜준다.
-readonly : 읽기만 가능하고, 값은 전송된다.
-required : 필수입력칸
-disabled : 입력불가 및 전송불가
입력을 받으면서 의문점이 생겼다 input의 속성중에 id와 name의 차이는 무엇일까?
우선 가장 큰 차이는 중복여부인 것 같다.
id속성은 page안에서 중복해서 사용할 수 없고, name속성은 page안에서 중복해서 값을 가질 수 있다.
그 다음으로는 아직 사용해 보지는 않았지만 id로 설정된 값은 서버로 값이 넘어가지 않고 name은 서버에서 접근이 가능하다고 한다.
즉, id는 자바스크립트에서 다루는 용도이고 name은 파라미터를 교환하기 위해 지정해 놓는 것 같다. 이 내용은 추후에 자바스크립트를 다뤄보면서 이해하면 좋을 것 같다.
