1. 폼 form 삽입하기
🐰 form : 여러 입력 양식을 그룹화하고 전송
🐰 폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동
➡️ 텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만,
폼에 입력한 사용자 정보는 ASP나 PHP, JSP같은 서버 프로그래밍을 이용해 처리
🥕 form을 만들고 사용자 화면을 구성하는 영역은 프론트엔드 영역에서 담당
🥕 form을 통해 전달 받은 데이터를 가공하는 일은 벡엔드 영역에서 처리
1) 폼을 만드는 <form> 태그
<form [속성="속성값"]>여러 폼 요소</form>
💡 폼 태그의 속성
| 종류 | 설명 |
| method | 폼을 서버로 전송할 때 http 메소드를 지정(=전송방식) · get : 주소표시줄에 사용자가 입력한 내용이 그대로 표시 - 보안이 위험 · post : 대부분이 사용하는 방식, 내부적으로 보이지 않게 전송 |
| action | 특정 주소값이나 파일 위치. 폼 데이터가 전송되는 곳. |
| name | 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정 |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함 |
🐰 autocomplete 속성 : 기본값. 자동 완성 기능
▶️ 입력한 적 있는 값을 한 두글자 정도 입력하면 이전에 입력 내용을 자동으로 보여준다.
<!-- 자동 완성 기능 끄기 -->
<form action="" autocomplete="off">
...
</form>
2) 폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그
<fieldset [속성="속성값"]>
<legend>그룹 이름</legend>
</fieldset>
fieldset : 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용
legend : fieldset로 묶은 그룹에 제목을 붙일 수 있음
<body>
<h1>쇼핑몰 주문하기</h1>
<form action="">
<fieldset>
<legend>상품 선택</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</form>
3) 폼 요소에 레이블을 붙이는 <label> 태그
<label>레이블명<input></label>
<label> 태그 : input 태그와 같은 폼 요소에 레이블을 붙일 때 사용
📍 label이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트
📍 label 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 인식
<!-- 폼 요소의 id 속성값을 <label>태그의 for 속성에 알려 주는 방법 -->
<label for="id명">레이블명<input id="id명"></label>
2. 사용자 입력을 위한 input 태그
🐰 <input> 태그 : 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용
1) <input> 태그의 type 속성
| 종류 | 설명 |
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스 생성 |
| password | 비밀번호 입력할 수 있는 필드 생성, 문자를 입력하면 특수문자로 생성 |
| search | 검색할 때 입력하는 필드 생성 검색 키워드를 입력할 경우 키워드를 지울 수 있도록 X 표시가 나타남 |
| url | url 주소 입력할 수 있는 필드 생성 |
| email 주소 입력할 수 있는 필드 생성 | |
| tel | 전화번호를 입력할 수 있는 필드 생성. 모바일에서는 숫자 키보드로 자동 전환. |
| checkbox | 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스 생성 |
| radio | 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼 생성 |
| number | 숫자를 조절할 수 있는 스핀 박스 생성. 모바일에서는 숫자 키보드로 자동 전환. [min은 이상, max는 이하, step은 클릭할 때 값] |
| range | 숫자를 조절할 수 있는 슬라이드 막대 생성 |
| date | 사용자 지역을 기준으로 날짜(연, 월, 일) 생성 |
| month | 사용자 지역을 기준으로 날짜(연, 월) 생성 |
| week | 사용자 지역을 기준으로 날짜(연, 주) 생성 |
| time | 사용자 지역을 기준으로 시간(시, 분, 초, 분할 초) 생성 |
| datetime | 국제 표준시로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 생성 |
| datetime-local | 사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 생성 |
| submit | 전송 버튼 생성 |
| reset | 리셋 버튼 생성 |
| image | submit 버튼 대신 사용할 이미지를 생성 |
| button | 일반 버튼 생성 |
| file | 파일을 첨부할 수 있는 버튼 생성 |
| hidden | 사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필드 생성 |
| color | 색상 선택 양식을 생성. 선택 시 색상 선택 화면이 나타나면 색상을 선택 할 수 있음. |
<input type= "속성" name= "이름(서버에서 사용하는 이름) 필수" id="css나 자바스크립트에서 제어할 때 사용"><!-- 이미지 버튼 -->
<input type="image" src="이미지 경로" alt="대체 텍스트">
💡 텍스트, 비밀번호 필드에서 사용하는 주요 속성
| 종류 | 설명 |
| size | 텍스트와 비밀번호 필드 길이 지정 = 화면에 몇 글자가 보이도록 할 것인지 지정 |
| value | 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용 |
| maxlength | 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수 지정 |
💡 체크 박스, 라디오 버튼에서 사용하는 속성
| 종류 | 설명 |
| value | 선택한 체크 박스나 라디오 버튼을 서버에 알려 줄 때 넘겨줄 값을 지정. 영문이거나 숫자여야 하며 필수 속성. |
| checked | 체크 박스나 라디오 버튼의 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용. |
💡 number, range에서 사용하는 속성
| 속성 | 설명 |
| min | 필드에 입력할 수 있는 최솟값을 지정 기본 최솟값은 0 |
| max | 필드에 입력할 수 있는 최댓값을 지정 기본 최댓값은 100 |
| step | 숫자 간격을 지정. 기본값은 1 |
| value | 필드에 표시할 초깃값 |
💡 날짜, 시간 범위를 지정하는 속성
| 종류 | 설명 |
| min | 날짜나 시간의 범위를 제한. min은 범위의 시작 날짜나 시간, max는 범위의 마지막 날짜나 시간 |
| max | |
| step | 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기 지정 |
| value | 기본적으로 표시할 날짜나 시간 지정 |
type="text", type="hidden", type="submit"
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type=text]{
width: 200px; height: 16px; border: 1px solid #999;
}
</style>
</head>
<body>
<form name="frmPost" action="action.php" method="post">
<label for="memberID">아이디</label>
<input type="hidden" name="loginType" value="general">
<input type="text" name="memberID" id="memberID" value="1" maxlength="4">
<input type="submit" value="전송">
</form>
</body>
type="password", type="search"
<body>
<form action="action.php" method="post">
<label for="mId">아이디</label>
<input type="text" name="memberId" id="mId" />
<label for="pwd">비밀번호</label>
<input type="password" name="password" id="pwd">
<input type="reset" />
<input type="submit" />
</form>
<br><br>
<form action="action.php" method="get">
<input type="search" name="search">
<input type="submit" value="검색" />
</form>
</body>
type="checkbox"
💡 php에서는 checkbox의 name을 배열처리해야 함 ▶️ name="hobby[]"
자바 계열에서는 배열처리를 하지 않음 ▶️ name="hobby"
<body>
<form name="frmPost" action="action.php" method="post">
<h4>취미</h4>
<!-- for에 해당 태그의 아이디 값을 지정하면 label 클릭 시에 해당 체크박스 선택, 해제 됨 -->
<input name="hobby[]" type="checkbox" value="sports" id="sportsId">
<label for="sportsId">스포츠</label>
<!-- label 태그로 전체를 감싸도 동일한 기능 -->
<label>
<input name="hobby[]" type="checkbox" value="game">
게임</label>
<!-- 분리해서 사용하면 선택, 해제 기능 안 됨. -->
<input name="hobby[]" type="checkbox" value="cook">
<label>요리</label>
<input type="submit" value="전송">
</form>
</body>
type="radio"
📍 짧은 항목에 대한 선택이 필요할 때 주로 활용되며, 반드시 한 가지 항목을 선택해야 할 때 사용
📍 name 값을 동일하게 작성해야 같은 그룹으로 인식
checked="checked"는 방문자의 편의를 돕기 위해 미리 항목에 체크된 상태를 보여주는 옵션
<body>
<form action="action.php" method="post">
<h4>직업</h4>
<input type="radio" name="job" value="design" id="design" checked="checked">
<label for="design">UI/UX 디자이너</label>
<input type="radio" name="job" value="front_end dev" id="front_end">
<label for="front_end">프런트엔드 개발자</label>
<input type="radio" name="job" value="back_end dev" id="back_end">
<label for="back_end">백엔드 개발자</label>
<input type="submit" value="전송">
</form>
</body>
type="color" 색상값 선택하기
<body>
<form name="frmPost" action="action.php" metho="post">
<label for="color">색상 선택</label>
<input type="color" name="color" id="color">
<input type="submit" value="전송">
</form>
</body>
type="date", type="month", type="week", type="datetime"
<body>
<form name="frmPost" action="action.php" method="post">
<label for="date2">날짜 선택</label>
<input type="date" name="date" id="date2">
<br><br>
<!-- type="month" 년/월에 대한 정보를 달력을 통해 선택 -->
<input type="month" name="month">
<br><br>
<!-- type="week" 년/주에 대한 정보를 달력을 통해 선택 -->
<input type="week" name="week">
<input type="submit" value="전송">
<br><br>
<!-- type="datetime" 날짜, 시간을 지정. -->
<label>datetime <input type="datetime-local" name="datetime-local"/></label>
</form>
</body>
type="search", type="url", type="email", type="tel", type="number", type="range"
<head>
<style>
label {
display: block;
padding: 10px;
}
</style>
</head>
<body>
<form name="etc" action="action.php" method="post">
<!-- type="search"-->
<label>검색<input type="search" name="search" /></label>
<!-- type="url" 자동으로 주소 양식 검사 -->
<label>url <input type="url" name="url"/></label>
<!-- type="email"-->
<!-- required : submit 전 반드시 채워져 있어야 하는 입력 필드를 명시 -->
<label>email <input type="email" name="email" required></label>
<!-- type="tel" -->
<label>tel <input type="tel" name="tel"/></label>
<!-- type="number" -->
<label>number <input type="number" name="number" min="1" max="100" step="5"/></label>
<!-- type="range" value는 초기값 -->
<label>range <input type="range" name="range" min="1" max="5" value="3"/></label>
<input type="reset"/>
<input type="submit"/>
</form>
</body>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'HTML&CSS > HTML' 카테고리의 다른 글
| [HTML] 표 만들기, 표 구조와 구성요소 (0) | 2024.03.25 |
|---|---|
| [HTML] input 태그 주요 속성, 폼에서 사용하는 여러가지 태그 (1) | 2024.03.23 |
| [HTML] 웹 문서 초기화 스타일, 시맨틱 코드 (0) | 2024.03.22 |
| [HTML] 이미지 태그, 하이퍼링크 삽입 (0) | 2024.03.19 |
| [HTML] 정의 및 기본구조, 텍스트 입력 태그, 순서 목록 태그 (2) | 2024.03.18 |