input이 아닌 입력 태그들
기타 입력 태그(와 관련 속성들) p154
1. textarea : 여러 줄의 문장(문자열)을 입력받는 요소용 태그
크기 지정 속성
rows : 높이(세로) 길이 지정, 줄, 라인
cols : 너비(가로) , 길이 지정, 글자 수
시작태그와 종료 태그 사이에 값을 전송(value 안 씀!)
공간의 크기를 변경할 수 있다.(기본값)
크기 변경 무효 : style="resize: none;"
띄어쓰기를 하면 화면상 파란색 부분의 공백이 생긴다.
끊어서 코딩하고 싶으면 >를 포함해서 가지고 내려간다.
크기 지정을 하고 쓴다.
지정한 크기 범위를 넘어갈 경우 자동으로 줄 바꿈이 되고 스크롤이 생긴다.
노란색 부분을 마우스로 움직여 크기를 바꿀 수 있다.
크기 조절을 없애고 싶다면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 영역</title>
</head>
<body>
<h2>여러 줄의 텍스트 입력</h2>
<form>
<textarea rows="5" cols="30" name="ta"
style="resize: none;">여기에 쓰는 내용이 전송됩니다.</textarea>
<br>
<input type="submit">
</form>
</body>
</html>
2. select : 선택 목록을 출력하는 요소 태그
<select> 태그는 영역을 지정, name을 지정(데이터베이스에 넣어야 하기 때문에 꼭 지정해야 한다.)
<option> 태그는 항목을 작성, value 값을 지정(각 항목마다 값을 정해 주면 데이터를 명시적으로 볼 수 있다.)
(<ol>과 <li> 형식임)
부가 속성
1) selected : 화면에 보일 시작 항목 선택 속성
작성한 내용의 위치가 바뀌지는 않지만 보일 때 지정한 값이 먼저 출력
처음에 보일 option 태그에 작성
2) multiple : 여러 항목을 선택할 수 있게 지정
size 속성과 함께 사용할 수 있다.
열리는 구조로 나오지 않고 option 항목 값을 넘어가도 스크롤바는 계속 나온다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h2>사용하는 이동통신사를 선택하세요.</h2>
<form>
<select name="mobile">
<option value="sk">SK</option>
<option value="kt" selected>KT</option>
<option value="lg">LG U+</option>
<option value="etc">기타</option>
</select>
<br>
<input type="submit">
</form>
<hr>
<h2>자동차 브랜드(다중선택)</h2>
<form>
<select name="cars" multiple size="5">
<option value="hy">현대</option>
<option value="kia">기아</option>
<option value="gm">GM</option>
<option value="sm">SM</option>
<option value="bmw">BMW</option>
</select>
</form>
</body>
</html>
3. datalist
input + select 요소
자동완성 기능처럼 동작
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h2>datalist 예</h2>
<form>
<input list="brs" name="22">
<datalist id="brs">
<option value="edge">엣지</option>
<option value="chrome">크롬</option>
<option value="safari">사파리</option>
<option value="opera">오페라</option>
</datalist>
</form>
<hr>
<h2>항목 그룹</h2>
<form>
<select name="major">
<optgroup label="computer">
<option>Software</option>
<option>System</option>
</optgroup>
<optgroup label="language">
<option>Koear</option>
<option>English</option>
</optgroup>
</select>
</form>
</body>
</html>input 태그에는 여러 가지 속성이 많아서 헷갈리는 부분이 많이 있었는데,
input 태그가 아닌 입력태그에도 여러 가지 속성이 있어
어떤 부분이 어떤 속성을 가지고 있는지 많이 찾아봐서 눈에 익혀두어야 할 것 같다.
HTML 수업은 이것으로 종료!
가장 기본적인 수업인 만큼 기초를 탄탄하게 다질 수 있도록 많이 사용해 봐야 할 것 같다.
'공부기록 > HTTP' 카테고리의 다른 글
| 2월 17일 (1) HTML - input type 속성 (0) | 2023.02.17 |
|---|---|
| 2월 16일 (2) HTML - 입력 양식 작성하기 (0) | 2023.02.16 |
| 2월 16일 (1) HTML - 공간 분할 (0) | 2023.02.16 |
| 2월 15일 (2) HTML - 하이퍼 링크 (0) | 2023.02.15 |
| 2월 15일 (1) HTML - 멀티미디어 (0) | 2023.02.15 |
