HTML 입력 양식

개인 공부 후 정리 목적인 글입니다.

 

 

 

폼

<form> : form 생성, form의 요소가 여러 개일 경우 <ul>을 이용해서 묶어줄 수 있다.

• method  :  전송 방식 선택
   - get : 256 ~ 4096 byte까지 전송 가능하다.
   - post : 입력 내용의 길이에 제한이 없다.
• name  :  form을 식별하기 위한 이름
• action  :  form을 전송할 서버 쪽의 script 파일을 지정
• target  :  action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에서 열리도록 지정

 

<fieldset> : form 요소들을 보기 쉽게 그룹으로 묶어줄 수도 있다.

• disabled  :  <fieldset>의 자식 요소들을 사용할 수 없게 만든다.
• form  :  현재 <fieldset>이 속해있는 <form>의 이름을 표시한다.
• name  :  서버로 넘겨줄 이름을 지정한다.

 

<legend> : <fieldset>으로 나누어진 구역에 제목을 붙일 때 사용한다(생략 가능)

                ex) <legend>제목 입력</legend>

 

<label> : <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다.

 

  사용 방법 2가지 

  1. 태그 안에 폼 요소를 넣는 것  ex) <label>레이블명<input></label>

  2. <label> 태그와 폼 요소를 따로 사용하고 <label> 태그의 for 속성과 폼 요소의 id 속성을 연결하는 것

    ex) <label for="id명" >레이블명<input id="id명"></label>

 

<select>, <option> : 드롭다운 목록으로 여러 항목을 그룹으로 묶는 경우 <optgroup>을 사용한다.

• value  :  옵션을 선택했을 때 서버로 넘길 값
• selected  :  화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.
• multiple  :  메뉴를 다중으로 선택하는 경우에 사용한다.
• optgroup의 label  :  그룹의 타이틀

 

<datalist>, <option> : 텍스트 필드에 입력할 수 있는 값들을 목록으로 제시해주어 쉽게 값을 입력할 수 있게 한다.

• value  :  사용자가 레이블을 선택했을 때 서버로 넘길 값
• label  :  사용자를 위해 브라우저에 표시할 레이블 값 (따로 지정하지 않으면 value 값을 사용)

 

<textarea> : 텍스트 상자, 게시글을 입력할 때처럼 한 줄 이상의 문장을 입력해야 할 때 주로 사용

• name  :  텍스트 영역의 이름 지정
• cols  :  텍스트 영역의 가로 너비를 문자 단위로 지정
• rows  :  텍스트 영역의 세로 길이를 줄단위로 지정(단위가 커지면 스크롤 생성됨)
• disabled  :  클릭할 수도 없고 수정도 불가능

 

input 태그

<input> : form의 요소중 하나, 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용한다.

• readonly  :  읽기 전용인 필드
• placeholder  :  힌트를 표시해준다.
• autofocus  :  자동으로 입력 커서가 표시되도록 한다.
• max/min  :  <input>필드의 최대값과 최소값 지정
• maxLength  :  텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정
• step  :  숫자의 간격 설정(date, datetime, datetime-local, month, week, time, number, range만 사용가능)
• required  :  필수 입력 필드
• size  :  텍스트 필드에서 화면에 표시할 크기를 지정
• list  :  연결할 데이터의 목록을 지정한다.
• value  :  입력변수의 초깃값으로 기본입력 값을 넣는다.

 

<input  type="속성">

• text  :  한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
• password  :  비밀번호를 입력할 수 있는 필드
• search  :  검색할 때 입력하는 필드
• hidden  :  사용자에겐 보이지 않지만 서버로 보내는 값이 있는 필드
• tel  :  전화번호를 입력하는 필드
• url  :  URL 주소를 입력하는 필드
• email  :  이메일 주소를 입력하는 필드 
• number  :  숫자를 조절할 수 있는 스핀 박스/화살표
• range  :  숫자를 조절할 수 있는 슬라이드 막대
• color  :  색상표
• checkbox  :  체크박스(2개 이상 선택 가능)
• radio  :  라디오 버튼(1개만 선택 가능)
• date  :  사용자 지역을 기준으로 날짜(연,월,일) 필드
• month  :  사용자 지역을 기준으로 한 날짜(연,월) 필드
• week  :  사용자 지역을 기준으로 날짜(연,주) 필드
• time  :  사용자 지역을 기준으로 시간(시,분,초,분할 초) 필드
• datetime  :  국제 표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초)
• datetime-local  :  사용자가 있는 지역을 기준으로 한 날짜와 시간(연,월,일,시,분,초,분할 초)
• button  :  일반 버튼
• file  :  파일을 첨부할 수 있는 버튼
• submit  :  서버 전송 버튼
• reset  :  리셋 버튼
• image  :  submit 버튼을 대신 사용할 이미지

 

<audio> : MP3, WAVE, Ogg 등등

• src  :  오디오 파일의 경로를 지정한다.
• controls  :  오디오 컨트롤을 표시할지 여부를 지정한다.
• autoplay  :  파일이 로드 되자마자 자동으로 재생된다.
• loop  :  사운드를 반복 재생하도록 설정한다.
• type  :  오디오 파일의 MINE형식을 지정한다.

 

<video> : MP4, WebM, avi, 등등

• src  :  동영상 파일의 경로를 지정한다.
• controls  :  동영상 파일에 컨드롤을 표시할지 여부를 지정한다.
• width, height  :  화면에서 비디오가 표시될 영역의 크기를 설정한다.
• poster  :  동영상 화면에 나타나지 않을 때 대신 표시할 그림이다.
• preload 
    1. auto : 페이지를 로드하고 바로 비디오 파일을 다운로드한다.
    2. metadata : 재생 전, 비디오의 크기, 프레임, 정보 등과 같은 메타 데이터만 다운로드한다.
    3. none : 재생 시작 전까지 파일을 다운로드하지 않는다.