form 폼 태그
사용자로부터 직접적으로 데이터를 입력 받아서 서버로 데이터를 전송해주는 태그
<form></form> 태그 안에 여러 폼 요소를 삽입해 사용한다.
form 태그 속성
method : 사용자가 입력한 내용들을 서버 쪽에 어떻게 넘겨줄지 지정한다. (get, post)
- get : 주소 url 에 사용자가 입력한 내용이 name과 함께 표시된다.
- post : 사용자 입력 내용이 url로 드러나지 않는다. 전송, 길이 제한 없다.
name : 폼 이름 지정하는 태그 / name속성을 써야 데이터가 전달 된다.
action : 입력한 데이터를 전송할 서버페이지 url
target : 현재 창이 아닌 다른 위치에 열도록 지정할 수 있다.
input 태그
form 태그안에 추가할 수 있는 입력 요소 / 필수 속성 : type
사용자에게 데이터를 입력을 받을 수 있는 필드를 생성하는 태그로 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재한다. type에 따라 동작 방식이 달라진다.
input type
<input type="text"> : 텍스트를 입력받는다 (input type의 기본값)
<input type="password"> : 텍스트를 입력받으면 * 으로 표시된다.
<input type="button"> : 버튼
<input type="submit"> : 제출 버튼
<input type="checkbox"> : 임의의 개수 체크할 수 있는 체크박스
<input type="radio"> : 하나만 체크할 수 있는 라디오버튼
<input type="number"> : 숫자 입력, 조절할 수 있는 필드
<input type="date"> : 연도, 월, 일
<input type="datetime-local"> : 연도, 월, 일, 시간
<input type="week"> : 연도, 주
<input type="month"> : 연도, 월
<input type="time"> : 시간
<input type="email"> : @를 포함한 텍스트 입력
<input type="file"> : 파일 선택해서 첨부 / 파일전송은 form method가 post여야 한다.
<input type="hidden"> : 사용자에게는 보이지 않지만 서버로 넘겨지는 값
<input type="image"> : submit 버튼 대신 사용할 이미지
<input type="color"> : 색상입력 or 색상선택기 표시
<input type="range"> : 슬라이더 / 숫자 조절이 가능한 슬라이드 막대
<input type="reset"> : 폼에 작성된 내용을 전부 삭제하는 리셋 버튼
<input type="search"> : 검색 필드
<input type="tel"> : 전화번호 입력 필드이지만 숫자만 입력해야하는 규제는 없다.
<input type="url"> : http://로 시작하느 사이트 주소 입력
Input 속성
disabled | 입력할 수 없도록 설정 / 서버로 전송 X |
max | 최대값 설정 (number 타입에서만 사용) |
maxlength | 문자 최대 길이 설정 |
min | 최소값 설정 (number 타입에서만 사용) |
minlength | 문자 최소 길이 설정 |
pattern | 일치해야 하는 패턴 설정 |
readonly | 입력만 가능하도록, 수정 불가능 / 서버로 전송 O |
required | 반드시 입력해야하도록 설정 |
size | input 필드 사이즈 설정 |
step | 입력할 수 있는 숫자들 사이의 간격을 명시 (number 타입에서만 사용) |
value | input tag에 미리 입력할 내용, 기본값 |
placeholder | 입력할 자리에 값이 없을 때 나타나는 내용, 값이 입력되면 사라진다. |
autofocus | 해당 태그를 입력 가능한 상태로 만들어줌 (커서 둔 상태) |
name | 서버로 전송할 input 요소의 이름 |
<form action="" method="get">
<input type="url" name="id" placeholder="아이디를 입력해주세요"
maxlength="20" minlength="5" autofocus><br>
<input type="password" name="passwd" required placeholder="암호를 입력해주세요"><br>
<input type="text" name="name" value="홍길동" readonly>
<button>로그인</button>
button 타입의 기본은 submit이다.
label 태그
폼 요소에 이름(텍스트)을 붙이는 태그
label의 for의 값과 양식의 id의 값이 같으면 연결된다.
label에 입력된 텍스트를 클릭했을 때 연결된 태그에 입력할수 있도록 하거나, 체크/체크해제할 수 있도록 하는 것이다.
<form action="">
<input type="checkbox" name = "hobby" value="게임" id = "game" checked>
<label for="game">게임</label>
<input type="checkbox" name = "hobby" value="등산" id = "hiking">
<label for="hiking">하이킹</label>
<br>
<button>제출</button>
</form>
value를 각각 입력해서 데이터가 전송될때 각각의 value로 구분될 수 있다.
태그를 구분하기 위한 id를 각각 입력했고, label 태그에 id를 연결했기 때문에 체크박스뿐만아니라 게임, 하이킹이라는 글자를 클릭해도 체크/해제가 된다.
checked는 미리 체크해 놓는 속성이다.
<form action="">
<label for="id">아이디</label>
<input type="text" id="id">
</form>
"아이디" 텍스트를 label로 id에 연결했기 때문에 "아이디" 텍스트를 클릭해도 text를 입력할 수 있는 상태가 된다.
<form action="">
가입약관 동의 여부 : <input type="radio" name="yn" value="yes" > 예
<input type="radio" name="yn" value="no" checked> 아니오
<button>제출</button>
</form>
radio는 하나만 선택하도록 할 수 있는 라디오버튼이다. name이 동일해야 그룹으로 묶이고, 그룹중에 하나만 체크가 될 수 있다. 선택 값은 value값으로 구분되어 전송된다. 반드시 체크가 되도록 no에 미리 checked로 선택해 두었다.
select
<select name="">
<option value=""> </option>
</select>
아래로 펼쳐지는 목록 상자를 만드는 태그
select 에서 전송되는 값은 option의 value 속성이며 selected 이용해서 기본적으로 선택할 항목 지정할 수 있다.
<select name="tel" id="">
<option value="-">선택하세요</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
</select><br>
선택된 값의 value가 전송된다.
textarea
사용자가 텍스트를 입력할 수 있는 텍스트 입력 상자 정의하기 위한 태그
<textarea name="" id="" cols="30" rows="10"> 미리 입력 될 텍스트 </textarea>
'WEB > HTML' 카테고리의 다른 글
이미지맵 태그 - img, map, area (0) | 2022.05.27 |
---|---|
HTML 태그 : progress, figure, blockquote, dl/dt/dd, pre, mark (0) | 2022.05.27 |
HTML 표(Table) 만들기 - table, tr, th, td 태그 (1) | 2022.05.26 |
하이퍼링크로 북마크 연결하기 (2) | 2022.05.25 |
하이퍼링크 태그 a / 속성 href, target, title, download (1) | 2022.05.25 |