textarea : 여러 줄을 입력하는 텍스트 영역
여러 줄을 입력하는 텍스트 영역을 만듭니다.
게시판에서 글을 입력하거나, 약관 등을 표시할 때 자주 사용합니다
<textarea>내용</textarea>cols와 rows 속성을 이용하여 텍스트 영역의 크기를 지정할 수 있습니다. cols는 문자 단위이고 rows는 줄 단위입니다. 지정한 rows수보다 텍스트가 길어지면 자동으로 스크롤 막대가 생깁니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<h1>회원 가입을 환영합니다</h1>
<form action="">
<label for="">메모<textarea name="" id="" cols="40" rows="10"></textarea></label>
</form>
</body>
</html>
select, option : 드롭다운 목록
사용자가 내용을 직접 입력하는게 아니라 여러 옵션 중에서 선택하게 하려면 드롭다운 목록을 사용할 수 있다.
select태그와 option태그를 이용해 표시한다.
select태그로 드롭다운 목록의 시작과 끝을 표시하고,
option태그를 사용해 그 안에 원하는 항목을 추가한다.
option태그에는 value속성을 이용해 서버로 넘겨주는 값을 지정한다.
<select name="" id="">
<option value="val1">option1</option>
<option value="val2">option2</option>
...
</select>select태그에 size속성을 활용해 화면에 표시할 드롭다운 항목의 개수를 지정할 수 있으며
multiple 속성을 활용해 드롭다운 목록에서 둘 이상의 항목을 선택하도록 할 수 있다
option 태그에는 selected 속성을 활용해 기본적으로 선택해서 보여 줄 항목을 지정할 수 있다.
datalist, option : 데이터 목록
데이터 목록도 사용자가 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택하도록 할 수 있다.
데이터 목록을 만들 때에는 datalist태그를 이용해 데이터 목록의 시작과 끝을 표시하고
그 사이에 option태그를 사용해 각 데이터의 옵션을 표시한다.
이때 value속성을 사용해서 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타난다.
그리고 데이터 목록을 사용할 텍스트 필드에서 어떤 데이터 목록을 연결할지 id값을 지정하면 된다.
<input type="text" list="데이터 리스트 id">
<datalist id="데이터 리스트 id">
<option value="서버로 넘길 값1">option1</option>
<option value="서버로 넘길 값2">option2</option>
</datalist>예제는 다음과 같다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<h1>회원 가입을 환영합니다</h1>
<form action="">
<h3>대학교를 입력해 주십시오</h3>
<input type="text" list="datalist1">
<datalist id="datalist1">
<option value="seoul UNIV.">서울대학교</option>
<option value="korea UNIV.">고려대학교</option>
<option value="yonsei UNIV.">연세대학교</option>
</datalist>
</form>
</body>
</html>
드롭다운 리스트와 달리 데이터리스트를 활용하면 굳이 선택지 중에 고르지 않고 직접 텍스트박스에 타이핑 하는 것 또한 가능하다.
button : 버튼 만들기
button 태그를 활용하여 버튼을 만들 수 있다.
<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>submit 타입은 <input type="submit">과,
reset 타입은 <input type="reset">과,
button 타입은 <input type="button">과 같은 기능을 한다.
button 태그는 폼 뿐만 아니라 버튼이 필요한 웹 문서의 어디든지 다양하게 활용할 수 있다.
button태그에는 콘텐츠를 포함할 수 있어서 아이콘을 추가하거나 CSS를 이용해 원하는 형태로 꾸밀 수도 있다.
'📁Web Developing > HTML 기초' 카테고리의 다른 글
| input 태그-6 (주요 속성들) (0) | 2022.05.30 |
|---|---|
| input 태그-5 (버튼, 히든필드) (0) | 2022.05.30 |
| input 태그-4 (날짜와 시간 입력) (0) | 2022.05.30 |
| input 태그-3 (number, range) (0) | 2022.05.30 |
| input 태그-2 (버튼) (0) | 2022.05.30 |
댓글