반응형
select 태그
다수의 선택지를 포함할 수 있는 선택 메뉴
선택지 항목은 option 태그를 이용하여 표시한다.
인라인 요소
기본 문법
<select>
<option>국어</option>
<option>영어</option>
<option>수학</option>
<option>과학</option>
</select>
select 요소는 name을 지정하여 다른 요소와 식별할 수 있다.
각각의 option에는 value를 지정할 수 있다.
option을 선택했을 때 그 value 값이 반환되어 연산 등의 기능을 할 수 있다.
<select name ="과목">
<option value="Korean">국어</option>
<option value="English">영어</option>
<option value="Math">수학</option>
<option value="Science">과학</option>
</select>
코드 예시
<!DOCTYPE html>
<head>
<meta charset = "utf-8">
<title> 내가 좋아하는 과목 </title>
<head>
<body>
<h1> 내가 좋아하는 과목을 선택하세요. <h1>
<select name ="과목">
<option value="Korean">국어</option>
<option value="English">영어</option>
<option value="Math">수학</option>
<option value="Science">과학</option>
</select>
<body>
<html>
multiple 속성을 이용하면 여러개를 선택할 수 있다.
ctrl을 누른 상태에서 선택지를 선택하면 여러 항목을 선택할 수 있다.
selected 속성을 이용하면 기본적으로 선택이 되어 있게 할 수 있다.
<!DOCTYPE html>
<head>
<meta charset = "utf-8">
<title> 내가 좋아하는 과목 </title>
<head>
<body>
<h1> 내가 좋아하는 과목을 선택하세요. <h1>
<select name ="과목" mutiple>
<option value="Korean">국어</option>
<option value="English" selected>영어</option>
<option value="Math">수학</option>
<option value="Science">과학</option>
</select>
<body>
<html>
Textarea
여러 줄의 텍스트를 입력할 수 있는 입력 요소
인라인 요소
기본 문법
<textarea name ="text"> </textarea>
textarea는 name을 지정하여 다른 요소와 식별할 수 있다.
rows와 cols 속성을 이용하여 textarea 크기를 지정할 수 있다.
여기는 rows는 행수, cols는 열수이다.
코드 예시
<!DOCTYPE html>
<head>
<meta charset = "utf-8">
<title> 내가 좋아하는 과목 </title>
<head>
<body>
<h1> 한줄 일기를 작성하세요. <h1>
<textarea name = "diary" rows = "10" cols = "10"></textarea>
<body>
<html>
반응형
'html' 카테고리의 다른 글
| form 태그 (0) | 2022.08.06 |
|---|---|
| 입력 요소: input 태그 (0) | 2022.08.01 |
| 목록 만들기 (0) | 2022.07.31 |
| 링크 만들기 (0) | 2022.07.27 |
| id, class 태그 (0) | 2022.07.25 |
