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"
        onchange="document.body.style.color=this.value"><br>
        배경색 선택 : <input type="color" value="#ECEBFF"
        onchange="document.body.style.background=this.value">
</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
텍스트 상자, datalist, 텍스트 버튼 만들기 :: 2020. 3. 4. 20:33 화면구현
openclose

티스토리툴바