*폼 삽입하기
사용자의 의견이나 정보를 얻으려고 폼을 사용하는 경우가 많음.
폼을 만드는 태그
<form [속성="속성값"]>여러 폼 요소</form>
form 태그의 속성
method="get" : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남
method="post" : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않음.
name=" " : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정(백엔드에서는 반드시 써줘야 함.
action=" " : form태그 안의 내용을 처리해 줄 서버 프로그램을 지정
target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함.
autocomplete="on/off" : 자동 완성 기능. 기본값은 on.
폼 요소를 그룹으로 묶는 태그
<fieldset> 태그는 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용
<fieldset [속성="속성값"]> </fieldset>
<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있음
<fieldset>
<legend> 그룹 이름 </legend>
</fieldset>
폼 요소에 레이블을 붙이는 태그
<label>태그는 <input>태그와 같은 폼 요소에 레이블을 붙일 때 사용.
레이블이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말함.
<lable>태그를 사용하면 폼 요소와 레이블 ㅌ텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있음.
<label>레이블명<input></label>
*사용자 입력을 위한 태그
웹 폼의 다양한 곳에서 사용하는 태그
아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input>태그를 이용.
<input>태그의 type 속성
텍스트와 비밀번호를 나타내는 type 속성
<input type="text">
<input type="password">
size : 텍스트와 비밀번호 필드의 길이를 지정
value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용, 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시, 비밀 번호 필드에서 사용하지 않는 속성
maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정
다양한 용도에 맞게 입력하는 type 속성
<input type="search">
<input type="url">
<input type="email">
<input type="tel">
체크 박스와 라디오 버튼을 나타내는 type 속성
<input type="checkbox"> : 주어진 여러 항목에서 2개 이상을 선택할 수 있는 체크 박스를 넣음
<input type="radio"> : 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣음
value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정. 이 값은 영문 또는 숫자여야 하며 필수 속성
checked : 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용. 속성값은 따로 없음
숫자 입력 필드를 나타내는 type 속성
<input type="number">
<input type="range">
min : 필드에 입력할 수 있는 최솟값을 지정. 기본값 0
max : 필드에 입력할 수 있는 최댓값을 지정. 기본값 100
step : 숫자 간격을 지정. 기본값 1
value : 필드에 표시할 초깃값
날짜 입력을 나타내는 type 속성
<input type="date | month | week">
min : 범위를 제한할 때 사용
max : 범위를 제한할 때 사용
step : 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정
value : 기본적으로 표시할 날짜 지정
시간 입력을 나타내는 type 속성
<input type="time | datetime | datetime-local">
min : 범위를 제한할 때 사용
max : 범위를 제한할 때 사용
step : 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정
value : 기본적으로 표시할 시간 지정
전송, 리셋 버튼을 나타내는 type 속성
<input type="submit" value="버튼에 표시할 내용">
<input type="reset" value="버튼에 표시할 내용">
submit은 폼에 입력한 정보를 서버로 전송. 전송된 정보는 <form>태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨짐
reset은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 지우는 역할을 함. value 속성을 사용해서 버튼에 표시할 내용을 지정
이미지 버튼을 나타내는 type 속성
<input type="image" src="이미지 경로" alt="대체 텍스트">
submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냄
기본 버튼을 나타내는 type 속성
<input type="button" value="버튼에 표시할 내용">
파일을 첨부할 때 사용하는 type 속성
<input type="file">
히든 필드 만들 때 사용하는 type 속성
<input type="hidden" name="이름" value="서버로 넘길 값">
히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소. 사용자에게 굳이 보여 줄 필요는 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력
input 태그의 주요 속성
자동으로 입력 커서를 갖다 놓는 속성
<input type="텍스트입력 필드" autofocus required>
페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있음.
힌트를 표시해 주는 속성
<input type="텍스트입력필드" placeholder=텍스트 필드에 표시될 내용">
읽기 전용 필드를 만들어주는 속성
<input type="텍스트입력필드" readonly">
사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있음. readonly 속성은 해당 필드를 읽기 전용으로 바꿈
필수 입력 필드를 지정하는 속성
반드시 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있음.
<input type="텍스트입력 필드" autofocus required>
폼에서 사용하는 여러 가지 태그
여러 줄을 입력하는 텍스트 영역 태그
<textarea>태그는 게시판에 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 자주 사용
<textarea>내용</textarea>
속성으로는 텍스트 영역의 가로 너비를 문자 단위로 지정하는 cols, 텍스 영역의 세로 길이를 줄 단위로 지정하는 rows가 있음.
드롭다운 목록을 만들어주는 태그
사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용.
<select>태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option>태그를 사용해 원하는 항목을 추가.
<option> 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정
<select>
<option value="값1">내용1</option>
<option value="값2">내용2</option>
</select>
<select>태그의 속성
size : 화면에 표시할 드롭다운 항목의 개수를 지정
multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용
<option>태그의 속성
value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정
selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정
버튼을 만들어주는 태그
<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>
실습
폼 태그(양식태그)
'KDT > WEB' 카테고리의 다른 글
| 231109 WEB - CSS2 우선순위 및 텍스트 스타일 (0) | 2023.11.09 |
|---|---|
| 231107 WEB - HTML4(input 속성), CSS1(CSS란?) (0) | 2023.11.07 |
| 231102 WEB - HTML2 참조 및 하이퍼링크 (0) | 2023.11.02 |
| 231031 WEB - HTML 1 태그 (0) | 2023.10.31 |
| 231027 WEB - JSP (0) | 2023.10.31 |