form 태그, input 태그

form 태그, input 태그

반응형

form 태그의 속성

종류 설명 method 사용자가 입력한 내용을 서버쪽 프로그램으로 어떻게 넘겨줄 것인지 지정.

- get : 데이터를 256 ~ 4,096 byte 까지만 서버로 넘길 수 있음. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남

- post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않음 name 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정 action 태그 안의 내용을 처리해 줄 서버 프로그램을 지정 target action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정

자동 완성 기능을 나타내는 autocomplete 속성

폼 요소를 그룹으로 묶는 , 태그

그룹 이름

폼 요소에 레이블을 붙이는 태그

레이블 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있음

1. 첫 번째 방법

아이디(6자 이상)

2. 두 번째 방법

아이디(6자 이상)

폼에서 사용하는 여러가지 태그

여러 줄을 입력하는 텍스트 영역 태그

드롭다운 목록을 만들어주는 , 태그

데이터 목록 만들어주는 , 태그

input 태그의 type 속성 한 눈에 보기

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

라디오 버튼과 name 속성

name 속성은 PHP와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 자주 사용하는데, 라디오 버튼에서 하나만 선택할 수 있게 하려면 name 속성 값을 똑같이 지정해야 한다.

포장 선택 선물 포장 선물 포장 안함

기본 버튼을 나타내는 type="button"

input 태그의 속성

읽기 전용 필드를 만들어주는 readonly 속성

필수 입력 필드를 지정하는 required 속성

힌트를 표시해주는 placeholder 속성

자동으로 입력 커서를 갖다 놓는 autofocus 속성

반응형

from http://yunseodozpwf.tistory.com/21 by ccl(A) rewrite - 2021-11-06 11:00:27