[HTML] HTML 정리 (2)
<form></form> : 사용자가 웹사이트로 정보를 보낼 수 있는 요소를 폼이라고 부른다.
보낸 정보는 서버에서 처리한다.
<form [속성 = "속성값"]>여러 가지 폼 요소</form>
form에 사용할 수 있는 속성을 알아보자.
1. method : 내용을 서버 쪽으로 어떻게 넘겨줄 것인지 지정한다.
- post : 속성값으로 post를 가질 수 있다. 주소 표시줄에 사용자가 입력한 내용이 드러나고, 데이터에 제한이 있다.
- get : 속성값으로 get을 가질 수 있다. 데이터에 제한이 없고 입력한 내용도 드러나지 않는다.
2. name : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다.
3. action : form 태그 안의 내용을 처리할 서버 프로그램을 지정한다.
- autocomplete : 자동완성 기능을 제공하고, 기본값은 on 이다.
4. target : action에서 지정한 스크립트 파일을 현재 창 말고 다른 위치에서 열도록 한다.
<fieldset></fieldset> : form 태그와 사용법은 같음. 하나의 폼 안에서 여러 구역을 나눠 표시할 때 사용한다.
<legend></legned> : fieldset으로 묶은 그룹에 이름을 붙일 때 사용한다.
그룹을 2개 만들고 이름을 상품선택과 배송정보로 정한 다음 각각을 따로 묶어줬다.
<label> : 폼 요소에 레이블을 붙일 때 사용한다. 바로 예시로 살펴보자.
아이디를 입력하는 form 옆에 레이블을 설정했다. (form은 입력할 수 있는 모든 요소임을 기억하자.)
for 속성과 id 속성으로 label과 form을 연결해서 사용했다.
<input></input> : 검색엔진에서 텍스트를 입력하는 부분, 웹사이트에서 아이디를 입력하는 부분 등 많은 부분에서 input 태그가 사용된다. input 태그의 type 속성에서 속성값들에 대해 알아보자.
- text : 한 줄 짜리 텍스트를 입력하는 박스
-- size : 텍스트의 필드 길이를 지정함. 화면에 보이는 텍스트의 개수를 지정한다고 생각하면 된다.
-- value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용.
- password : 비번을 치는 필드.
- search : 검색할 때 입력하는 필드.
- checkbox : 선택지를 만들 때 쓰이는 필드.
- radio : 선택지에서 복수선택을 가능하게 하는 필드.
-- value : 선택값을 서버에게 알려 줄 때 넘겨줄 값을 지정한다.
-- checked : 선택값의 기본값을 설정할 때 사용한다.
- number : 사용자가 직접 입력하지 않고 막대를 이용해 숫자를 선택할 수 있게 한다.
- range : number와 비슷한 역할. 슬라이스 막대를 움직여 숫자를 입력한다.
-- min : 필드에 입력할 수 있는 최솟값 지정. 기본 0
-- max : 필드에 입력할 수 있는 최댓값 지정. 기본 100
-- step : 숫자 간격 조절. 한 번에 n 씩 늘어나도록 설정.
- month, week, date, time : 달력으로 날짜와 시간을 입력할 수 있ㅏㄷ.
- submit : 버튼임. action에 설정한 서버로 정보를 전달하는 버튼.
- reset : 이것도 버튼. 초기하는 역할을 한다.
- button : 그냥 버튼. 기능이 없고 자바스크립트를 실행할 때 사용한다.
- file : 파일을 첨부할 때 사용한다.
- hidden : 입력을 마치면 폼과 함께 서버로 전송되는 요소. 관리자에게 필요한 정보를 히든 필드로 처리한다.
- autofocus : 페이지를 불러오자마자 원하는 위치에 마우스포인터를 표시할 때 사용한다.
- placeholder : 아이디를 입력하세요라고 희미하게 떠 있는 부분이다.
- readonly : 읽기 전용으로 만든다.
- required : submit으로 전송할 때 필수 속성을 지정해 필수로 작성하게 한다.
등등... input 태그는 여러 가지 속성을 가지고, input 태그의 속성도 여러 가지 속성을 가진다.
아이디는 text 타입으로, 비밀번호는 password 타입으로 설정한 것을 볼 수 있다.
세분화된 필드는 컴퓨터에서는 큰 변화를 주지 않지만 모바일 환경에서 유용하다.
키보드를 열 때 숫자 키패드, 영문 키패드를 컨트롤하는데 쓰인다.
radio 와 checkbox로 선택지를 만들었다.
'
range와 number로 다양한 방법으로 입력받을 수 있도록 했다.
<textarea></textarea> : 텍스트를 여러 줄 입력할 때 사용. 사용약관을 생각하자.
- cols : 가로 너비 설정
- rows : 세로 길이 설정 (줄 단위)
메모 부분에 textarea 태그를 사용해서 표현했다.
<select></select>, <option></option> : 드롭다운 목록을 만들어 준다.
<datalist> : 데이터 목록을 만들어 준다.
바로 예시를 통해 알아보자.
datalist를 사용하면 서버로 넘겨줄 값을 텍스트 필드에도 표시한다.
<button></button> : input태그로도 버튼을 구현할 수 있고, button태그를 사용하는 방법도 있다. CSS를 이용해 원하는 형태로 꾸미기 쉬워서 button태그를 사용하는 편이 합리적이다.
'낙서장' 카테고리의 다른 글
| [CSS] CSS 정리 (4) (2) | 2022.02.06 |
|---|---|
| [CSS] CSS 정리 (3) (1) | 2022.01.21 |
| [CSS] CSS 정리 (2) (0) | 2022.01.20 |
| [CSS] CSS 정리 (1) (0) | 2022.01.19 |
| [HTML] HTML 정리 (1) (0) | 2022.01.18 |