티스토리 뷰

Web/HTML

[html] form 태그 기초

HAN_PY 2021. 12. 30. 10:45
반응형

html의 form tag에 대해 알아보자. 어려운 내용은 아니니 중요 개념 위주로 적겠다. 기본 부터 확인하자.

 

 

기본 form

<!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">
        <input type="text" name="uid"><br>
        <input type="password" name="pw"><br>
        <input type="reset"> 
        <input type="submit"> <br>
    </form>
</body>
</html>

 

결과값은 아래와 같다.

 

 

 

  • action="/"  : 현재 페이지로 이동한다는 말이다.
  • method="get" : get방식으로 보낸다는 말이다.
  • type: reset : 은 적힌 값들이 사라진다
  • type: submit : 값들을 전달한다. 이때 name 값을 안적으면, 값이 전달하지 않는다.

 

abc/123을 누르고 제출을 누르면 결과값은 아래와 같다.

 

 

name을 꼭 적어줘야 값들이 위와 같이 key value 형식으로 들어간다.

 

 

checkbox와 radio

<!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">
        <label for="soccer">축구</label>
        <input type="checkbox" name="hobby" id="soccer" value="축구">
        <label for="music">음악</label>
        <input type="checkbox" name="hobby" id="music" value="음악">
        <label for="game">게임</label>
        <input type="checkbox" name="hobby" id="game" value="게임">

        <br >

        <label for="female">여성</label>
        <input type="radio" name="gender" id="female" value="여성">
        
        <label for="male">남성</label>
        <input type="radio" name="gender" id="male" value="남성">
        
        <br >
        
        <input type="reset"> 
        <input type="submit"> <br>
    </form>
</body>
</html>

 

우선 결과 값 부터 확인하자.

 

아주 깔끔하게 잘 나왔다.

네모가 checkbox이다.

  • 복수 선택이 가능하다.
  • 네모 모양으로 된다.

동그라미가 radio이다.

  • 단일 선택만 가능하다
  • 동그라미 모양으로 된다.

 

제출을 누를 시 value 값을 반드시 적어줘야 전송된다.

축구, 음악, 남성을 누르고 제출을 누르면 아래와 같다.

 

 

select

<body>
    <form action="/" method="get">
        <label for="edu">최종학력</label>
        <select name="education" id="edu">
            <option value="elementary">초</option>
            <option value="middle">중</option>
            <option value="high school">고</option>
        </select>
        <br >
        
        <input type="reset"> 
        <input type="submit"> <br>
    </form>
</body>

 

'중' 을 누르고 결과 값을 보면 아래와 같다.

 

  • 전송 시 key가 select의 name이 되고, value가 option의 middle이 됨을 확인 할 수 있다.

 

textarea

<body>
    <form action="/" method="get">
        <textarea name="comments" id="comments" cols="30" rows="10"></textarea>

        <br >
        
        <input type="reset"> 
        <input type="submit"> <br>
    </form>
</body>

 

"hello hanpy"를 적고 확인하면 아래와 같다.

 

 

color와 datatime

<body>
    <form action="/" method="get">
        <input type="color" name="col"> <br>
        <input type="date" name="time"> <br>
        <input type="datetime-local" name="localtiom"> <br>
        <input type="range" name="trangex`"> <br>
        
        <input type="reset"> 
        <input type="submit"> <br>
    </form>
</body>

 

 

위와 같이 적고 제출을 하면 아래와 같다.

 

 

나머지는 응용이 쉽게 가능할 듯하다.

반응형

'Web > HTML' 카테고리의 다른 글

HTML에서 javascript 동작 순서 기초 정리  (0) 2023.02.05
[html] a 태그  (0) 2022.01.08
[html] 표(테이블) 만들기  (0) 2021.12.24
[html] 비디오(mp4) 영상 태크  (0) 2021.12.19
[html] 이미지 태그 기초  (0) 2021.12.16
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함