HTML - Form, Input 태그 정리
191218 수업 내용 정리
<form>
- 외부에서 값을 입력 받아 전송할 때 사용(->DB)
▷속성 - method : 데이터 전송 방식 지정
1) get : 데이터가 url창에 노출되면서 전송 ex) 사이트 접속, 검색어 입력
2) post : 전달되는 값이 url창에 노출되지 않음, 보안이 get방식보다 좋음
ex) 회원가입, 로그인, 파일 첨부된 메일
=> 주로 post방식을 사용함, default = get
- action : 누구에게 값을 전달해줄 것인가에 대한 속성
※ - name : 할당된 이름으로 각각의 입력받은 값을 구분 => '변수'로 사용
<input>
- 특정 타입의 박스를 추가해주는 태그, form태그 안에 쓰임, 빈 태그
▷속성 type = "text" : 텍스트를 입력할 수 있는 박스
"password" : 텍스트를 입력하면 가려서 출력
"radio" : 둘 중에 하나의 값만 선택 가능
"checkbox" : 다중선택 가능
→ checked="checked" 속성을 주면 해당 박스를 미리 선택된 상태로 만들 수 있음
"file" : 파일 첨부 형식을 만들어 줌
"button" : 데이터를 수동으로 처리하며, 추후에 JS를 이용해주어야 실용적
→ value=""로 버튼에 출력되는 문자를 지정해줄 수 있음
※버튼을 눌렀을 때 어떤 버튼을 눌렀는지 컴퓨터는 어떻게 구분하는가?
→ name, id 값으로 구분함, 요즘엔 id를 많이 씀
"submit" : 입력받은 데이터를 자동으로 데이터베이스로 전송해 주는 버튼
"reset" : 입력한 값들을 전부 삭제시키는 버튼
<select> : 정해져 있는 값들 중에서 하나를 선택할 수 있는 목록 상자(콤보 박스)
<option> : <select> 안에 사용되며, 각 항목을 지정하는 태그,
▷속성 selected : 하나의 값을 미리 선택되어 있게 함
<textarea> : 여러줄의 텍스트를 입력 받을 때 사용
▷속성 cols : 가로 텍스트 길이
rows : 세로 텍스트 길이
<input> 속성 in HTML5
▷속성 type="email" : 이메일 전용, 이메일 형식을 취하는 지 확인함
"url" : 사이트 주소 입력
"date" : 날짜 입력
"time" : 시간
"datetime" : 날짜와 시간을 입력할 수 있지만 아직 사용가능한 브라우저는 없음
"number" : 텍스트박스에 숫자만 들어갈 수 있게 해줌
▷속성 min : 최소값
max : 최댓값
step : "증가/감소" -> 스텝 버튼 생성
value : "현재 숫자 값"
"range" : 지정한 수의 범위를 트랩바로 표시해줌
"search" : 검색창에 사용하며, 입려값 취소시 X 클릭 (X는 문자열 입력시 생성)
▷또 다른 속성 placeholder : 대화상자에 "툴팁문자열 표시" (미리보기 기능), 글자를 쓰면 사라짐
required : 유효성 검사, required가 부여된 박스에 값을 입력하지 않으면 페이지를 넘어갈 수 없음
autofocus : 자동으로 커서 입력, autofocus="autofocus"(생략가능)
<datalist> : 내부에 <option>을 사용해서 데이터 목록을 만듦,
<datalist id="dtl">에 아이디를 부여해서 <input type="text" list="dtl">에 바인딩하면
텍스트박스를 목록상자처럼 만들 수 있음
<progress> : 백분율 표시, min, max, value 등의 속성을 사용할 수 있음
<meter> : <progress>보다 매끄러운 백분율을 나타낼 수 있음
form태그와 input태그 안에는 굉장히 다양한 속성이 있기 때문에 반복 숙달할 필요가 있습니다.
예제를 같이 올리면 좋을텐데 양이 많아서 시간적 여유가 없네요...ㅠㅠ