1. <textarea>
태그 안에 여러 줄의 글자를 입력해주는 태그
<input type="text">와 비슷하지만 조금 더 확장된 기능을 가진다.
박스의 크기는 조절 가능하며, 고정도 가능하다.
|
1
2
3
4
|
<form>
<textarea cols="40" rows="5" style="resize: none;">
폼에 들어가는 value 영역
</textarea><br>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
2. <datalist> 태그
목록 리스트를 작성하는 태그입니다.
<input type="text">에 입력 가능한 데이터 목록 제고
사용자가 직접 입력 혹은 드롭다운 메뉴에서 옵션 선택도 가능
|
1
2
3
4
5
6
|
<input type="text" list="country">
<datalist id="country">
<option>대한민국</option>
<option>호주</option>
<option>미국</option>
</datalist>
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
3. 체크박스와 라디오 버튼
- 체크박스 만들기 : <input type="checkbox">
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
짜장면 <input type="checkbox" value="1">
탕수육 <input type="checkbox" value="2" checked>
만두 <input type="checkbox" value="3">
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
- 라디오 버튼 만들기 : <input type="radio">
*name 속성 값이 같은 라디오버튼들이 하나의 그룹을 형성한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
짜장면 <input type="radio" name="china">
탕수육 <input type="radio" name="china">
만두 <input type="radio" name="china">
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
4. 선택형 입력 : 콤보 박스
<select>
- 드롭 다운 리스트에 목록 출력, 목록을 선택하는 입력방식이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="china">
<option value="1">짜장면</option>
<option value="2">탕수육</option>
<option value="3">만두</option>
</select>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
5. 컬러 다이얼로그 색 입력
<input type="color">
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
글자색 선택 : <input type="color" value="#B2CCFF"
배경색 선택 : <input type="color" value="#ECEBFF"
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
'화면구현' 카테고리의 다른 글
| CSS 알아보기 (0) | 2020.03.05 |
|---|---|
| HTML 날짜 입력하기, (0) | 2020.03.05 |
| 검색창 만들기 (0) | 2020.03.04 |
| 웹 폼 (0) | 2020.03.04 |
| HTML 오디오, 비디오 삽입하기 (0) | 2020.03.04 |
rss