Practice makes perfect

[HTML] HTML PART.5(입력 양식 태그 타입 , 레이블) 본문

web/HTML

[HTML] HTML PART.5(입력 양식 태그 타입 , 레이블)

kerpect 2020. 6. 17. 00:47

 

<form> </form>  : 입력 양식의 폼

<input> : 데이터 입력(form 안에서만 사용되며 , 단일 태그)

- text : text 를 입력 할 수 있는 란을 생성.

- button : 버튼 생성

- chekbox : 체크 박스는 그룹 아네서 여러 가지 선택이 가능합니다.  

- file : 파일을 선택을 통해서 원하는 파일을 가져올 수 있습니다.

- password : 입력 시 , 특수 문자로 출력하여 노출 되지 않게 합니니다.

- radio : 라디오 버튼은 그룹 주에 한개만 선택되도록 합니다.

- reset : 초기화 버튼을 누르면 form 안에 있는 모든 입력 양식 태그가 초기화 됩니다.

- submit : form 태그 안에 모든 입력 내용을 전달하는 역할을 합니다.

  (form 안에 submit이 반드시 존재 합니다. ex) 회원가입 )

- hidden : 보이지 않는 입력 양식 태그

 

 

- color : 색 선택

- date : 연, 월, 일 선택

- datetime-local : 연, 월, 일, 시, 분 선택

- detetime : 지정한 날짜가 출력

 

 

 

- email : email 입력

- number : 숫자 입력(옆의 커서를 눌러서 변경이 가능)

- range : 범위 선택

- search : 검색어 입력

- tel : 전화번호 입력

- url : URL 입력

 

 

 

- Lable 태그

 

 

 

레이블과 입력 양식 태그를 연동하여 label 을 선택했을 때 포거스가 들어도록 합니다.

(이름을 눌렀을 때, 이름의 레이블에 커서가 들어갑니다.)

 

 

- 여러 줄의 글자를 입력할 때 사용하는 태그 (input 태그가 아닌 입력 양식 태그)

 

<textarea rows ="줄 수" " cols="글자 수(픽셀)"> </textarea>

Rows : 태그의 높이를 지정, cols : 태그의 너비를 지정

글꼴 표준 정의에 따라서 byte의 크기가 다르기 때문에 입력하는 크기 사이즈에 따라서 결과가 다를 수 있습니다.  

 

 

textarea에 한에서만 모든 여백을 그대로 text로 인식하요 처리합니다.

 

 

- Swing에서 사용하는 combobox 와 같은 처리하는 태그

<select> <option> 내용 </option></select>

 

 

각 그룹 지어서 출력 되도록 하는 것도 가능합니다.

 

<select> <optgroup label =""> <option></option> </optgruop> </select>  형태로 가능하게 합니다.

 

 

- Fieldset legend 태그

 

Fieldset : 입력 양식을 설명하는 태그

Legend : fieldset 안에서 사용했을 때, 타이틀의 모양으로 나타냅니다. (fieldset 안에서 자녀 태그)

 

 

 

아이디를 눌렀을 때, 포커스가 맞춰서 들어가도록 합니다.

Form 태그로 입력양식을 무조건 감싸야 하는 이유는 서버에서 formaction을 불러와서 출력하는 형태 때문입니다.