HTML&CSS

<form> 요소 종류들

Linda~! 2020. 3. 5. 00:10

 

아래에 각각의 화면 결과들이 있어요!

 

<textarea>

 

 

 

<datalist>

 

 

 

<input type="checkbox"> 체크박스는 중복선택 가능, <input type="radio">

태그 input의 속성 checked, 속성 selected는 기본값으로 해두는 것!

 

 

<select>

HTML에서의 색표현

색 코드 - #rrggbb

 

여기서 색 선택하고 확안하면 아래와 같이 글자색이 바뀝니다.

 

배경색 또한 아래와 같은 결과 화면이 있어요!

 

아래에 코드있어요!

더보기

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <form>

        <textarea cols="20" rows="5" style="resize:none;">

            폼에 들어가는 value 영역

        </textarea><br>

        <!--list속성 값 과 id값은 반드시 일치해야한다.-->

        <input list="country">

        <datalist id="country">

            <option>대한민국</option>

            <option>일본</option>

            <option>중국</option>

        </datalist>

        <br>

        짜장면 <input type="checkbox" value="1" name="china">

        짬뽕 <input type="checkbox" value="2" name="china" checked>

        탕수육 <input type="checkbox" value="3" name="china"><br>

 

        짜장면 <input type="radio" value="1" name="china">

        짬뽕 <input type="radio" value="2" name="china"checked>

        탕수육 <input type="radio" value="3" name="china"><br>

 

        <select name="china">

            <option value="1">짜장면</option>

            <option value="2" selected>짬뽕</option>

            <option value="3">탕수육</option>

        </select><br>

        

        글자색 선택 : <input type="color" value="#00BFFF" 

        onchange="document.body.style.color=this.value"><br>

 

        배경색 선택 : <input type="color" value="#00BFFF"

        onchange="document.body.style.background=this.value"><br>

 

        

    </form>

</body>

</html>