728x90
반응형
<form> 태그
폼 이란 사용자 아이디/패스워드 같은 정보를 입력받을 때 사용된다.
<form> 태그 안에 <input>, <check> 등의 여러 입력칸을 작성하여
입력 폼 만들기
<form 속성="속성값">여러 폼 요소</form>
속성
- method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨 줄 지 지정
- get : 입력길이 제한있음, 주소 표시줄에 내용드러남
- post : 입력길이 제한없음, 주소 표시줄에 내용안드러남 - name : JS로 폼 제어 시 사용할 이름
- actiotn : form 태그 안의 내용 처리할 서버 프로그램 지정
- target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함
- autocoplete : 자동 완성 기능 (default=on) / 중요한 정보 입력은 off해줘야 함
예시
<form action="파일명.php">
...
</form><fieldset>, <legend> 태그
폼 요소를 그룹으로 묶기
하나의 폼 안에서 여러 그룹으로 나눠 표시할 때 사용한다.
<legend>태그는 <fieldset>으로 묶은 그룹에 제목을 붙일 때 쓴다.
<fieldset 속성="속성값"> </fieldset><fieldset>
<legend>그룹명</legend>
</fieldset>예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>페이지 제목</title>
</head>
<body>
<h1>폼 입력 그룹으로 구분</h1>
<form action="example.php">
<fieldset>
<legend>1번 form</legend>
</fieldset>
<fieldset>
<legend>2번 form</legend>
</fieldset>
</form>
</body>
</html>
결과
<label> 태그
폼 요소에 레이블 붙이기
레이블이란 입력란 바로옆에 붙여둔 이름표다.
사용방법은 2가지가 있다.
1. 폼 요소 앞뒤에 <label> 태그를 붙여서 쓰는 방법
<label>레이블명<input></label>2. 폼 요소와 <label> 태그를 따로 작성한 뒤 <label> 태그의 for 요소와 폼 요소의 id를 연결하는 방법
<label for="id명">레이블명<input id="id명"></label>아래와 같이 따로 작성한 뒤
똑같은 id를 붙여서 폼 요소와 연결시킬 수 있다.
<label for="id">아이디</label>
...
<input type="text" id="id">
반응형
'프론트엔드 개발 > HTML CSS' 카테고리의 다른 글
| CSS - html 파일에 css 적용시키는 방법 (0) | 2021.09.02 |
|---|---|
| HTML - input 태그 (사용자 입력, 텍스트 필드, 버튼) (0) | 2021.08.28 |
| HTML - 이미지, 오디오, 비디오, 링크 삽입 (0) | 2021.05.30 |
| HTML - HTML 태그 (목록, 표) (0) | 2021.05.30 |
| HTML - HTML 태그 (제목, 단락, 인용구, 서식) (0) | 2021.05.30 |