본문 바로가기
스마트인재개발원/HTML,CSS

[HTML]입력양식태그

by 죠졍니 2022. 9. 30.
728x90
반응형
SMALL
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <!-- form : 서버로 데이터를 전송하기 위해 사용하는 태그 -->
    <!-- action(필수) : 데이터를 어디로 전송할건지 / 안정해졌으면 #-->
    <!-- method(선택) : 어떤 방식으로 데이터를 전송할건지 
                (get/post)중 택1 
                get : 데이터를 url에 포함
                post : 패킷에 숨겨서 데이터 전송
                작성하지 않으면, get방식으로 전송                 -->
    <form action="#" method="get">
        ID : <input type="text" name = "id" placeholder="아이디 입력" required autofocus><br>
        PW : <input type="password" name = "pw"><br>
        <input type="email" name="email">
        <input type="tel" pattern="[0-1][3]-[0-9][4]-[0-9][4]"
                             title="###-####-#### 입력해주세요">

        <br>
        <h3>취미</h3>
        <input type="checkbox" value = "reading" name="hobby">독서
        <input type="checkbox" value="exercising" name="hobby">운동
        <input type="checkbox" value="movie" name="hobby">영화보기

        <h3>성별</h3>
        <input type="radio" value="male" name="gender">남
        <input type="radio" value="female" name="gender">여

        <br>
        <br><br><br>
        <input type="file"><br>
        <input type="color"><br>
        <input type="date"><br>
        <input type="number" min="0" max="10"><br>

        <select name="select">
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select>

        <textarea name="text" cols="100" rows="20">

        </textarea>

        <!-- form내에서 중복값 확인/다른 기능(제출 제외) 넣고 싶을때 -->
        <input type="button">
        <!-- form 내에 작성된 값 초기화-->
        <input type="reset" value="reset">
        <!-- form 태그 내에 작성되어 있는 모든 값들을 서버로 전송 -->
        <input type="submit" value="submit">

    </form>
</body>
</html>
728x90
반응형
LIST