1. input 태그의 주요 속성
1) 자동으로 입력 커서를 갖다 놓는 autofocus 속성
<input type=텍스트-입력-필드 autofocus required>
🐰 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시
2) 힌트를 표시해 주는 placeholder 속성
🐰 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 함
3) 읽기 전용 필드를 만들어 주는 readonly 속성
<input type=텍스트-입력-필드 readonly>
🐰 사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있다
4) 필수 입력 필드를 지정하는 required 속성
🐰 반드시 입력해야 하는 내용에 required 속성을 지정해 필수 필드로 만들 수 있다.
2. 폼에서 사용하는 여러 가지 태그
1) 여러 줄을 입력하는 텍스트 영역 <textarea> 태그
<textarea>내용</textarea>
🐰 장문의 글자를 입력 받을 때 주로 사용되는 글자박스
🐰 이메일 양식에서 메일 내용이나 게시판의 글 내용을 적을 때 사용
name : 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 설정
cols : 텍스트 영역의 넓이를 문자 단위로 지정
rows : 텍스트 영역의 높이를 줄 단위로 지정. 줄 개수가 많아지면 스크롤 바가 나타남
<head>
<style>
textarea[name=contents] {
width: 500px;
height: 200px;
border: 1px solid #6666;
background: #eaeaea;
padding: 20px;
font-size: 16px;
}
textarea[name=contents]:focus {
outline: none;
}
textarea[name=contents2]:focus {
outline: 2px solid #a00;
}
</style>
</head>
<body>
<form name="frmPost" action="action.php" method="post">
<textarea name="contents"></textarea>
<textarea name="contents2" cols="60" rows="18"></textarea>
<input type="submit" value="전송">
</form>
</body>
2) 드롭다운 목록을 만들어 주는 <select>, <option> 태그
🐰 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용
🐰 <select> 태그로 드롭다운 목록의 시작과 끝을 표시하고, <option> 태그를 사용해 원하는 항목을 추가
<select> 태그 속성
a. size : 화면에 표시할 드롭다운 항목의 개수를 지정
b. multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용
<option> 태그 속성
a. value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정
b. selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정
<body>
<form name="frmPost" action="action.php" method="post">
<select name="part">
<option value="H">HTML</option>
<option value="C">CSS</option>
<option value="J" selected>JAVASCRIPT</option>
</select>
<!-- select multiple로 입력하면 키보드의 Ctrl 키를 누른 상태에서 여러 개 선택 가능 -->
<select multiple name="part2[]">
<option value="H">HTML</option>
<option value="C">CSS</option>
<option value="J">JAVASCRIPT</option>
<option value="H">HTML</option>
<option value="C">CSS</option>
<option value="J">JAVASCRIPT</option>
</select>
<input type="submit" value="전송">
</form>
</body>
3) 데이터 목록 만들어 주는 <datalist>, <option> 태그
🐰 데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있다
🐰 <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터 옵션을 표시
➡️ value 속성을 사용해 서버로 넘겨줄 값을 지정, 이 값이 텍스트 필드에도 나타남
➡️ 데이터 목록을 사용할 텍스트 필드에서 어떤 데이터 목록을 연결할 지 id값을 지정
<input type="text" list="데이터 목록 id">
<datalist id="데이터 목록 id">
<option value="서버로 넘길 값1">선택 옵션1</option>
<option value="서버로 넘길 값2">선택 옵션2</option>
</datalist><body>
<form action="">
<!-- 데이터 목록 -->
<label for="prod">포장 여부 </label>
<input type="text" id="prod" list="pack">
<datalist id="pack">
<option value="package">선물 포장</option>
<option value="no_package">포장 안 함</option>
</datalist>
</form>
</body>
4) 버튼을 만들어 주는 <button> 태그
<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>
🐰 <button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입
🐰 type 속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정. 기본 값은 submit
🐰 콘텐츠를 포함할 수 있어 아이콘을 추가하거나 CSS를 이용해 원하는 형태로 꾸밀 수도 있다.
<body>
<form action="action.php">
<div>
<button type="submit">주문하기</button>
<button type="reset">취소하기</button>
</div>
</form>
</body>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'HTML&CSS > HTML' 카테고리의 다른 글
| [HTML] 표 만들기, 표 구조와 구성요소 (0) | 2024.03.25 |
|---|---|
| [HTML] 입력 양식 작성하기 | 폼form 삽입하기, input태그와 type 속성 (2) | 2024.03.23 |
| [HTML] 웹 문서 초기화 스타일, 시맨틱 코드 (0) | 2024.03.22 |
| [HTML] 이미지 태그, 하이퍼링크 삽입 (0) | 2024.03.19 |
| [HTML] 정의 및 기본구조, 텍스트 입력 태그, 순서 목록 태그 (2) | 2024.03.18 |