HTML : 폼, 테이블

FE_Log

JunO3O

홈

방명록

전체글

검색

분류 전체보기 (50)

태그 목록

중앙 레이아웃 vscode 수평 레이아웃 입력 양식 박스 속성 상태 선택자 아이디 선택자 the web developer bootcamp Udemy 후손 선택자 위치 속성 글자태그 배경 속성 요소 배치 반응 선택자 그레이디언트 one true 레이아웃 공간 분할 css CSS 단위 태그 선택자 유동 속성 목록태그 display 속성 자손 선택자 글자 생략 속성 선택자 html 구조 선택자 글자 속성

즐겨찾기

HTML : 폼, 테이블

HTML : 폼, 테이블

2023. 3. 21. 03:11ㆍ비공개

HTML 테이블

: 표는 2차원 행과 열 구조로 되어 있는 데이터 테이블을 말하는 것입니다.

<table> : 테이블을 만들기 위해 사용하는 태그입니다.

<tr> : table row를 줄일 말로 표 안에 있는 셀들이 모인 행을 말합니다.

<th> : 헤더를 정의합니다.

<td> : 테이블 데이터 셀을 줄인 말로 단일 셀을 나타냅니다.

<thead> : 표의 헤더 영역을 지정합니다.

<tbody> : 표의 여러 행을 묶어서 표의 본문을 구성합니다.

<tfoot> : 테이블의 열을 요약하는 행들의 집합을 말합니다.

<colgroup> : 표의 열을 묶는 그룹을 지정합니다.

<caption> : 표의 설명 또는 제목을 나타냅니다.

<!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>Foods and Ingredients Harmful to Dogs</title>
  </head>
  <body>
    <h1>Foods and Ingredients Harmful to Dogs</h1>
    <table>
      <caption> 강아지에게 해로운 음식들과 미치는 영향</caption> <!-- 표의 설명 또는 제목을 나타냅니다. -->
      <thead> <!-- 표의 헤더 영역을 지정합니다. -->
        <tr> <!-- 표 안에 있는 셀들이 모인 행을 의미합니다. -->
          <th>문제 음식</th> <!-- 표의 헤더 데이터를 정의합니다. -->
          <th>문제 성분</th>
          <th>섭취 후 증상</th>
        </tr>
      </thead>
      <tbody> <!-- 표의 본문을 구성합니다.-->
      <tr>
        <td>초콜릿</td> <!-- 테이블 데이터를 의미합니다. -->
        <td>메틸잔틴 : 카페인, 테오브로민</td>
        <td>구토, 탈수, 근육 경련, 발작, 복통</td>
      </tr>
      <tr>
        <td>우유, 치즈(유제품)</td>
        <td>유당</td>
        <td>구토, 설사, 기타 위장장애 가능</td>
      </tr>
      <tr>
        <td>마카다미아</td>
        <td></td>
        <td></td>
      </tr>
      </tbody>
    </table>
  </body>
</html>

colspan / rowspan

ㅁ colspan

: 하나의 셀 또는 행을 여러 열로 나누고 둘 이상의 열로 합병하기 위해서 사용합니다.

<!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>
    <style>
      td {
        text-align: center;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="width: 100px" />
        <col style="width: 100px" />
        <col style="width: 100px" />
        <col style="width: 100px" />
        <col style="width: 100px" />
      </colgroup>
      <caption>
        <b>수강생 명단</b>
      </caption>
      <thead>
        <tr>
          <th>번호</th>
          <th>이름</th>
          <th>학번</th>
          <th>학과</th>
          <th>비고</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>홍길동</td>
          <td>20152015</td>
          <td>경제학과</td>
          <td>-</td>
        </tr>
        <tr>
          <td>2</td>
          <td>이순신</td>
          <td>15921592</td>
          <td>군사학과</td>
          <td>-</td>
        </tr>
        <tr>
          <td>3</td>
          <td>박지성</td>
          <td>20022002</td>
          <td>체육학과</td>
          <td>-</td>
        </tr>
        <tr>
          <td>4</td>
          <td>스티브</td>
          <td>20102010</td>
          <td>반도체공학과</td>
          <td>-</td>
        </tr>
        <tr>
          <td>5</td>
          <td>아무개</td>
          <td colspan="3">자퇴</td>
          <!-- colspan은 정한 숫자만큼의 열을 하나의 행으로 묶을 수 있습니다. -->
          <!-- 원래는 아래와 같이 나열되어 있었지만 하나로 묶기 위해서는 자리를 비워줘야 합니다.  
            <td>20102010</td>
            <td>반도체공학과</td>
            <td> - </td>
          -->
        </tr>
      </tbody>
    </table>
  </body>
</html>

5번 아무개의 자퇴로 인해 학번, 학과, 비고 칸을 colspan="3"을 통해 하나로 묶어 자퇴 처리하였다.

ㅁ rowspan

: 하나의 셀을 두개 이상으로 확장하거나 셀을 여러 행으로 나눌 때 사용합니다.

<!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>
    <style>
      td {
        text-align: center;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="width: 100px" />
        <col style="width: 100px" />
        <col style="width: 100px" />
        <col style="width: 100px" />
        <col style="width: 100px" />
      </colgroup>
      <caption>
        <b>수강생 명단</b>
      </caption>
      <thead>
        <tr>
          <th>번호</th>
          <th>이름</th>
          <th>학번</th>
          <th>학과</th>
          <th>비고</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>홍길동</td>
          <td>20152015</td>
          <td>경제학과</td>
          <td>눈에 보이는듯 안보임</td>
        </tr>
        <tr>
          <td>2</td>
          <td>이순신</td>
          <td>15921592</td>
          <td>군사학과</td>
          <td rowspan="3">-</td>
        </tr>
        <tr>
          <td>3</td>
          <td>박지성</td>
          <td>20022002</td>
          <td>체육학과</td>
          <!-- 위에서 rowspan="3"이라는 값으로 비고를 하나의 칸으로 묶어 버렸기 때문에 자리를 비워줘야 한다.
            <td> - </td> 
          -->
        </tr>
        <tr>
          <td>4</td>
          <td>스티브</td>
          <td>20102010</td>
          <td>반도체공학과</td>
        </tr>
        <tr>
          <td>5</td>
          <td>아무개</td>
          <td colspan="3">자퇴</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

2,3,4번의 비고는 -로 동일하므로 rowspan="3"을 통해 하나로 묶었다.

=> rowspan은 밑으로우~ 묶을 수 있고, colspan은 c의 오른쪽이 뚫려있듯이 옆으로 묶을 수 있다. 단, 묶을 때는 묶는 자리에 해당하는 데이터들을 비워줘야 한다.

폼(form)

: 폼(form)은 여러 개별 폼 컨트롤을 품는 컨테이너에 가깝습니다.

: 이메일, 이름, 비밀번호 입력 칸 등을 하나의 폼으로 묶어 사용합니다.

: 폼 요소는 폼을 제출했을 때 폼 데이터를 어디로 보낼지 지시합니다.

<form action="보낼 목적지">     <!-- action 속성은 폼이 제출되었을 때, 데이터를 보낼 위치와 속성을 지정합니다.-->
  	<!-- 입력 폼 작성 --> 
</form>

ex)
<form action="/강아지">
            <label for="username"> 아이디를 입력하세요 : </label>     <!-- 입력 폼 작성 -->
            <input type="text" placeholder="아이디를 입력하세요" id="username" name="username" />
</form>

입력 양식 <input>

: <input> 은 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.

: <input> 은 type 속성과 함께 사용하며, type 에 따라 입력 양식의 종류가 달라집니다.

: <input> 은 닫는 태그가 없습니다.

<input type="입력 양식 종류">
ex)
<input type="text">     <!-- text 를 입력받는 양식을 만듭니다. -->

<!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>Forms</title>
</head>
<body>
    <h1>Forms 연습</h1>
    <form action="/강아지/">
        <p>
            <label for="username"> 아이디를 입력하세요 : </label>
            <input type="text" placeholder="아이디를 입력하세요" id="username" name="username" /><br /><br />
        </p>
        <p>
            <label for="password"> 패스워드를 입력하세요 : </label>
            <input type="password" placeholder="비밀번호를 입력하세요" id="password" name="password" /><br /><br />
        </p>
        <p>
            <label for="color"> 색상을 선택하세요 : </label>
            <input type="color" id="color" name="color" /><br /><br />
        </p>
        <p>
            <label for="number"> 핸드폰 번호를 입력하세요 : </label>
            <input type="number" placeholder="핸드폰 번호를 입력하세요" id="number" name="phonenumber" /><br /><br />
        </p>
        <p>
            <label for="time"> 시간을 입력하세요 : </label>
            <input type="time" id="time" name="time" /><br /><br />
        </p>
        <button>제출하기</button>
    </form>
</body>
</html>

=> 이외에도 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input 에 많은 양식 종류가 나와있습니다.

ㅁ placeholder

: placeholder 는 입력 폼에 미리 지정한 문구를 표시하는 역할을 합니다.

<input type="입력 양식 종류" placeholder="미리 표시할 문구">
ex)
<input type="text" placeholder="아이디를 입력하세요">

레이블 label

: 체크박스 등 입력 폼에 대한 설명을 만들어주기도 하며, 설명을 클릭해도 체크박스가 체크/해제 되도록 <input> 과 연결합니다.

<label for="input에서 지정한 id값"> 표시할 내용 </label>
<input type="입력 양식 종류" placeholder="미리 표시할 내용" id="___">
ex)
<label for="username"> 아이디를 입력하세요 : </label>
<input type="text" placeholder="아이디를 입력하세요" id="username"/>

label을 작성하여 입력 폼 왼쪽의 "아이디를 입력하세요 : " 를 클릭하여도 입력 폼(input)이 선택되도록 만들 수 있습니다.

버튼 <button>

: 제출하기 버튼, 회원가입 버튼, 아이디/비밀번호 찾기 버튼 등 버튼을 만들 때 사용합니다.
: <button> 은 작성된 코드 위치에 따라 다르게 동작하므로 버튼을 눌렀을 때 작동할 구문과 같이 놓아야 합니다.

<button> 버튼에 표시할 내용 </button>
ex)
<button> 제출하기 </button>

<!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>Forms</title>
</head>
<body>
    <h1>Forms 연습</h1>
    <form action="/강아지/">
        <p>
            <label for="username"> 아이디를 입력하세요 : </label>
            <input type="text" placeholder="아이디를 입력하세요" id="username" name="username" /><br /><br />
        </p>
        <p>
            <label for="password"> 패스워드를 입력하세요 : </label>
            <input type="password" placeholder="비밀번호를 입력하세요" id="password" name="password" /><br /><br />
        </p>
        <p>
            <label for="color"> 색상을 선택하세요 : </label>
            <input type="color" id="color" name="color" /><br /><br />
        </p>
        <p>
            <label for="number"> 핸드폰 번호를 입력하세요 : </label>
            <input type="number" placeholder="핸드폰 번호를 입력하세요" id="number" name="phonenumber" /><br /><br />
        </p>
        <p>
            <label for="time"> 시간을 입력하세요 : </label>
            <input type="time" id="time" name="time" /><br /><br />
        </p>
        <button>제출하기</button>
    </form>
</body>
</html>

이름 속성(name)

: <input> 양식 컨트롤의 이름을 말하며, name="값" 형태로 전송됩니다.

<input type="text" name="이름 값">
ex)
<input type="text" name="username" placeholder="아이디를 입력하세요" id=username">

URL에 username=안녕하세요 라고 입력되는 것을 확인할 수 있으며, 이 상태로 서버로 데이터를 전송하게 됩니다.

Google 검색창 만들기

: 입력 폼에 검색값을 입력할 시 구글에서 검색하도록 하기 위해서는 실제 구글에서 사용하는 검색 방식을 따라야합니다.

=> 구글에서 "cat"을 검색하면 아래만큼의 긴 URL이 나오는데

https://www.google.com/search?q=cat&hl=ko&source=hp&ei=beSJY5enM52Ir7wPrayFmAY&iflsig=AJiK0e8AAAAAY4nyfbwW5tXhXjphqHVrGU04qyfINmTO&ved=0ahUKEwjXkbSO7dr7AhUdxIsBHS1WAWMQ4dUDCAs&uact=5&oq=cat&gs_lcp=Cgdnd3Mtd2l6EAMyCwguEIAEELEDENQCMhEILhCABBCxAxCDARDHARDRAzILCAAQgAQQsQMQgwEyCwgAEIAEELEDEIMBMgQIABADMgsIABCABBCxAxCDATIECC4QAzILCAAQgAQQsQMQgwEyCwgAEIAEELEDEIMBMggIABCABBCxAzoLCC4QgAQQsQMQgwE6BQguEIAEOg4ILhCABBCxAxDHARDRAzoFCAAQgARQAFjpCmCDDGgCcAB4AIABkQGIAdwEkgEDMC41mAEAoAEBsAEA&sclient=gws-wiz

=> 이는 전부가 꼭 필요한 URL이 아니기 때문에 필요한 URL만 가져옵니다.

https://www.google.com/search?q=cat

=> 이제 <form action="목적지"> 에는 https://www.google.com/search 주소를 지정하고, 입력 폼의 이름 속성에는 name="q"를 입력합니다.

<input> 태그의 name="값"은 google의 양식을 따라야하기 때문에 "q"로 지정해야 합니다.

=> 검색창 만들기

<!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의 목적지는 구글 검색이기 때문에 /search까지 입력해야 합니다. -->
    <form action="https://www.google.com/search"> 
        <h1> Google </h1>
        <input type="text" name="q">     <!-- input 값이 무엇이든 /search로 전송됩니다.-->
        <button> 검색하기 </button>
    </form>
</body>

</html>

라디오 버튼, 체크박스, 선택창

ㅁ 체크 박스

: 동의 여부 등을 확인할 때 체크박스를 사용합니다.

<form action="목적지">
    <label for="checkbox">동의여부</label>
    <input type="checkbox" name="checkbox" id="checkbox">  
    <!-- 체크박스를 체크된 상태로 보여주기 위해서는 checked를 넣어주면 됩니다 -->
    <!-- <input type="checkbox" checked>  -->
</form>

ㅁ 라디오 버튼

: 여러 항목 중 하나를 선택해야 할 때 사용합니다.

: 여러 항목 중 하나를 선택하기 위해서는 같은 그룹으로 묶고 그 중 하나를 선택하도록 연결시켜줘야 합니다.

: 하나의 그룹으로 묶기 위해서는 name 속성을 같은 값으로 지정하면 됩니다.

: 여러 항목 중 선택된 값을 서버에 전송하기 위해 value 속성을 지정해줘야 합니다.

<input type="radio" name="___" id="___" value="___">
ex)
        <h2>라디오 버튼</h2>
        <p>
            <label for="1020"> 10~20대</label>
            <input type="radio" name="age" id="1020" value="10~20">
            <label for="3040"> 30~40대</label>
            <input type="radio" name="age" id="3040" value="30~40">
            <label for="5060"> 50~60대</label>
            <input type="radio" name="age" id="5060" value="50~60">
        </p>
        <button> 제출하기 </button>

=> 체크박스와 10~20대를 선택한 후 제출하기를 누르면

<!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>
    <h2> </h2>
    <form action="/cats">
        <h2>체크박스</h2>
        <label for="checkbox">동의여부</label>
        <input type="checkbox" name="checkbox" id="checkbox"> <!-- 체크박스 -->

        <h2>라디오 버튼</h2>
        <p>
            <label for="1020"> 10~20대</label>
            <input type="radio" name="age" id="1020" value="10~20">
            <label for="3040"> 30~40대</label>
            <input type="radio" name="age" id="3040" value="30~40">
            <label for="5060"> 50~60대</label>
            <input type="radio" name="age" id="5060" value="50~60">
        </p>
        <button> 제출하기 </button>


    </form>
</body>

</html>

=> 아래와 같이 checkbox=on 과 age=10~20 의 결과를 확인할 수 있습니다. checkbox=on 이라는 것은 체크박스가 체크되었다는 것이고, age=10~20은 라디오 버튼 항목들 중 10~20대를 선택하였기 때문에 10~20대의 value 값인 10~20이 서버로 보내지게 됩니다.

ㅁ select

: 드롭다운 메뉴를 만들 때 사용합니다.

: <select> 요소와 <option> 요소가 함께 기능하여 나오는 결과물입니다.

: <select> 는 상위 요소이며, <option> 들을 하나의 그룹으로 묶는 역할을 합니다.

: <option> 은 드롭다운 메뉴의 목록을 만들 때 사용하며, value 속성과 함께 사용합니다.

<select name="___" id="___">
    <option value="___"> 메뉴 목록1 </option>
    <option value="___"> 메뉴 목록2 </option>
    <option value="___"> 메뉴 목록3 </option>
    <!-- 미리 값을 선택해놓기 위해서는 selected 속성을 추가하면 됩니다. -->
    <!-- <option value="___" selected> 메뉴 목록 </option> -->
</select>

ex)
        <p>
            <label for="fruits"> 과일 종류</label>
            <select name="fruits" id="fruits">
                <option value="apple">사과</option>
                <option value="orange">오렌지</option>
                <option value="banana">바나나</option>
                <option value="mango">망고</option>
                <option value="pear">배</option>
            </select>
        </p>

범위 range / 숫자 number

ㅁ <input type="range">

: range 입력은 슬라이더를 만들어서 사용자가 범위 내에서 값을 선택할 수 있게 합니다.

: 최소값과 최대값을 정할 수 있습니다.

<input type="range" id="___" name="___" min="___" max="___">
ex)
        <p>
            <label for="age"> 나이 </label>
            <input type="range" id="age" name="age" min="0" max="100">
        </p>

=> step 속성을 적용할 경우, x만큼씩 증가하며 슬라이더를 움직일 수 있습니다.

        <p>
            <label for="age"> 나이 </label>
            <input type="range" id="age" name="age" min="0" max="100" step="20">
        </p>                  <!-- step="20"으로 인해 슬라이더는 20만큼씩 움직이게 됩니다. -->

ㅁ <input type="number">

: 숫자를 입력하는 폼을 만들 때 사용합니다.

<input type="number" placeholder="미리 표시할 문구" name="___" min="최소값" max="최대값">
ex)
<input type="number" placeholder="0" name="number" min="1" max="20">

텍스트 영역 <textarea>

: 사용자가 자유롭게 입력할 수 있는 텍스트 공간을 만들 때 사용합니다.

<textarea id="___"> </textarea>
<!-- 텍스트영역의 행과 열의 수는 rows와 cols를 통해 변경할 수 있습니다. -->
ex)
        <p>
            <label for="question"> 질문을 작성하세요.</label> <br>
            <textarea id="question" name="question" rows="20" cols="20" placeholder="질문을 작성하세요"></textarea>
        </p>

폼의 유효성 검사 require

: 유효성 검사는 일반적으로 제한을 추가하거나 사용자 입력 또는 데이터의 유효성을 확인하는 것을 말합니다.

: 어떤 입력 칸은 비어 있으면 안되거나 비밀번호의 길이를 제한하는 등 데이터의 유효성을 확인하는 역할을 합니다.

: require 속성을 입력하면 필수 입력을 만들 수 있습니다.

<input type="___" name="___" id="___" required>     
<!-- required로 인해 필수로 입력해야 하는 폼이 되었습니다 -->
ex)
    <h2> 유효성 검사 </h2>
    <form action="/dummy">
        <p>
            <label for="first"> 성을 입력하세요. </label>
            <input type="text" name="first" id="first" required>
        </p>
        <button> 제출하기 </button>
    </form>

required 속성으로 인해 필수로 입력해야 하는 폼이 되었기 때문에 제출하기를 누르면 "이 입력란을 작성하세요."라는 문구가 뜹니다.  문구는 브라우저마다 다릅니다.

ㅁ minlength / maxlength

: 최소 입력 길이와 최대 입력 길이를 지정할 수 있습니다.

<!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>
    <h2> 유효성 검사 </h2>
    <form action="/dummy">
        <p>
            <label for="first"> 성을 입력하세요. </label>
            <input type="text" name="first" id="first" required>
        </p>

        <p>
            <label for="username"> Username </label>
            <input type="text" id="username" name="username" minlength="7" maxlength="15">
        </p>
        <button> 제출하기 </button>

    </form>
</body>

</html>

minlength="7"로 인해 최소 입력 값은 7 글자 이상이어야 하며,

maxlength="15"로 인해 입력 폼이 가질 수 있는 최대 글자 수는 15글자 입니다.

=> 유효성 검사 문구는 작성한 코드에 따라 관련된 문구로 표시됩니다. 예를 들어, 이메일 폼을 만들기 위해 <input type="email" required> 로 작성하면 아래와 같이 이메일 형식(@)에 맞도록 유효성 검사를 진행합니다.

type="email" 이기 때문에 이메일 형식에 맞추도록 안내를 해줍니다. 단, 실제로 있는 이메일인지 판단은 하지 않습니다. 단순히 형식을 맞춰주는 역할을 합니다.

연습하기

: 지금까지 배웠던 내용들로 간단한 페이지 만들어보기

<!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> 놀이공원 입장권 구매 페이지</title>
</head>

<body>
    <h1> 놀이공원 입장권 구매</h1>
    <form action="/">
        <div>
            <!-- action 속성은 데이터를 어디로 제출할지 결정하는 역할을 합니다. -->
            <laebl for="first"> 성을 입력하세요 : </laebl>
            <input type="text" id="first" name="firstname" placeholder="성" required>
            <laebl for="last"> 이름을 입력하세요 : </laebl>
            <input type="text" id="last" name="lastname" placeholder="이름" required>
        </div>

        <p> * 이용 시간을 선택하세요. </p>
        <!-- 라디오 버튼 항목을 하나로 묶을 때는 name 속성의 값을 갖게 해줘야 합니다. -->
        <div>
            <input type="radio" name="time" id="morning" value="8~12">
            <label for="morning"> 오전 8시 ~ 오후 12시 </label>
        </div>
        <div>
            <input type="radio" name="time" id="afternoon" value="1~6">
            <label for="afternoon"> 오후 1시 ~ 오후 6시</label>
        </div>
        <div>
            <input type="radio" name="time" id="night" value="7~12">
            <label for="night"> 저녁 7시 ~ 저녁 12시</label>
        </div>
        <br>
        <div>
            <label for="id">아이디를 입력하세요 : </label>
            <input type="text" name="id" id="id" placeholder="아아디" required>
            <label for="password">비밀번호를 입력하세요 : </label>
            <input type="password" name="password" id="password" placeholder="비밀번호" required>
        </div>
        <br>
        <div>
            <label for="age"> 연령대를 입력하세요 : </label>
            <select name="age" id="age">
                <option value="0~9">0~9</option>
                <option value="10~19">10~19</option>
                <option value="20~29">20~29</option>
                <option value="30~39">30~39</option>
                <option value="40~49">40~49</option>
                <option value="50~59">50~59</option>
            </select>
        </div>
        <br>
        <button> 제출하기</button>
    </form>

</body>

</html>

=> 입력한 내용에 따라 URL에 표시된 것을 확인할 수 있습니다.

'비공개' 카테고리의 다른 글

CSS 선택자 (1)	2023.03.21
CSS : 기초 (1)	2023.03.21
HTML : 시맨틱(Semantics) (0)	2023.03.21
HTML 기초 (0)	2023.03.21
웹 개발 (1)	2023.03.21

'비공개' 카테고리의 다른 글

관련글

티스토리툴바