[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으로 묶은 그룹에 이름을 붙일 때 사용한다.

 

좌측은 html코드 우즉은 실행 결과

 

그룹을 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태그를 사용하는 편이 합리적이다.