입력 양식 작성하기
폼 삽입하기
- 웹에서 만나는 폼
폼 : 아이디나 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소 모두 <form>: 폼을 만드는 태그
<form [속성="속성값"]>여러 폼 요소</form>- 기본형
<속성> : 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정
method: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정
get - 데이터를 256 ~ 4096 byte까지만 서버로 넘길 수 있다. 입력내용이 그대로 드러나는 단점이 있다.
post - 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않는다.name: js로 폼을 제어할 때 사용할 폼의 이름을 지정한다.action:<form>태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.
<!--입력한 폼을 서버로 보내기-->
<form action="register.php">
/*여러 폼 요소*/
</form>autocomplete: 자동 완성 기능을 나타내는 속성
<!--자동 완성 기능 끄기-->
<form action="" autocomplete="off">
/*여러 폼 요소*/
</form><fieldset>,<legend>: 폼 요소를 그룹으로 묶는 태그
<fieldset [속성="속성값"]>
<legend>그룹 이름</legend>
</fieldset> <label>: 폼 요소에 레이블을 붙이는 태그, 이 태그는 두가지 방법으로 사용할 수 있다.
<!--레이블명과 인풋 태그를 같이 넣어주는 방법-->
<label>레이블명<input></label>
<!--인풋 태그를 밖에 사용해주고 for속성을 이용해서 id를 연결해주는 방법-->
<label for="user-id">레이블명</label>
<input type="text" id="user-id">사용자 입력을 위한 input 태그
사용자가 입력한 정보를 받을 때 사용하는 태그
<input태그의 type속성>
text: 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣는다.password: 비밀번호를 입력할 수 있는 필드를 넣는다.
텍스트 필드와 패스워드 필드에서 사용하는 주요 속성- size : 필드의 길이를 지정, 예를 들어 5로 지정하면 5개의 글자 크기에 맞추고 나머지 글자는 화면에 보이지 않는다.
- value : 텍스트 필드 부분에 보여주는 내용, 사용하지 않으면 그냥 빈 텍스트 필드 표시, 패스워드에서는 사용하지 않는다.
- maxlength : 필드에 입력 가능한 최대 문자 수를 지정
search: 검색할 때 입력하는 필드를 넣는다. 몇몇 브라우저는 필드 오른쪽에 X표시가 생긴다.url: URL 주소를 입력할 수 있는 필드를 넣는다.email: 이메일 주소를 입력할 수 있는 필드를 넣는다.tel: 전화번호를 입력할 수 있는 필드를 넣는다.
상위 4개의 속성은 텍스트 필드와 같은 역할, HTML5 부터 텍스트 필드의 세분화를 위해 사용
checkbox: 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣는다.radio: 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼 박스를 넣는다.
체크박스와 라디오 버튼에서 사용할 수 있는 속성vlaue: 서버에 알려줄 때 넘겨줄 값을 지정합니다. 영문checked: 기본으로 선택해 놓고 싶은 항목에 사용, 속성값은 따로 없다.
number: 숫자를 조절할 수 있는 스핀 박스를 넣는다.range: 숫자를 조절할 수 있는 슬라이드 막대를 넣는다.min: 필드에 입력할 수 있는 최솟값을 지정한다. 기본 최솟값은 0max: 필드에 입력할 수 있는 최댓값을 지정한다. 기본 최댓값은 100step: 숫자 간격을 지정할 수 있다. 기본값은 1value: 필드에 표시할 초깃값
date: 사용자 지역을 기준으로 날짜(연, 월, 일)을 넣는다.month: 사용자 지역을 기준으로 날짜(연, 월)를 넣는다.week: 사용자 지역을 기준으로 날짜(연, 주)를 넣는다.
time: 사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣는다.datetime: 국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣는다.datetime-local: 사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣는다.
submit: 전송 버튼을 넣는다.reset: 리셋 버튼을 넣는다.
image:submit버튼을 대신 사용할 이미지를 넣는다.button: 일반 버튼을 넣는다.file: 파일을 첨부할 수 있는 버튼을 넣는다.hidden: 사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다.
input 태그의 주요 속성
autofocus: 자동으로 입력 커서를 갖다 놓는 속성
<input type=텍스트-입력-필드 autofocus required>- 기본형placeholder: 힌트를 표시해주는 속성, 입력란에 내용을 표시해 두고 사용자가 필드를 클릭하면 사라지게 만들 수 있다.readonly: 읽기 전용 필드를 만들어 주는 속성, 사용자가 입력하지 못하고 읽게만 한다.
readonly="readonly"혹은readonly="true"로 지정required: 필수 입력 필드를 지정하는 속성
required="required"혹은required라고만 입력해도 된다.
폼에서 사용하는 여러 가지 태그
<textarea>: 여러 줄을 입력하는 텍스트 영역 태그
cols와 rows 속성을 이용하여 가로 세로 너비를 지정할 수 있다.
<select>,<option>: 드롭다운 목록을 만들어 주는 태그, 사용자가 내용을 직접 입력하지 않고 여러 옵션 중에 선택하게 한다.
<select>
<option value="값1">내용1</option>
<option value="값2">내용2</option>
</select><selection 태그의 속성>
size: 화면에 표시할 드롭다운 항목의 개수를 지정multiple: 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용
<option 태그의 속성>
value: 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정selected: 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정
<datalist>,<option>: 데이터 목록 만들어 주는 태그, 미리 만들어 놓은 값 중에서 선택할 수 있다.
<button>: 버튼을 만들어 주는 태그
<button태그의 속성>submit: 폼을 서버로 전송한다.<input type="submit">과 같은 기능reset: 폼에 입력한 내용을 초기화한다.<input type="reset">과 같은 기능button: 버튼 형태만 만들 뿐 자체 기능은 없다.<input type="button">과 같은 기능
코딩하는 펭귄