HTML (2) : 테이블, Form, Input (Day 2)

코딩기록·2024년 10월 9일
Tableformhtmlinput국비지원테이블프론트엔드

국비지원

목록 보기
1/1

[테이블]

  • 테이블 기본 구조 : table > tbody > tr(table row) > th(table header;제목) or td(table data)
    <table>
  <tbody>
    <tr>
      <th></th>
    </tr>
    <tr>
      <td></td>
    </tr>     
    </t
  </tbody>
</table>
Document
이름 주소 성별
박영희 성남시 여자
김철수 서울시 남자
홍길동 부산시 남자 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border-collapse: collapse;
    }
    td, th {
      border: 1px solid gray;
      text-align: center;
      padding: 7px;
    }
    th {
      background: lightgray;
    }
  </style>
</head>
<body>
  
  <table>
    <tbody>
      <tr>
        <th>이름</th>
        <th>주소</th>
        <th>성별</th>
      </tr>
      <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>

[form]

  • 정의 : <form>태그는 웹페이지에서 사용자로부터 데이터를 입력받아 처리하거나 서버에 데이터를 전송하는 데 사용
  • Attributes : autocomplete="off"(자동완성), novalidate(유효성 검사 X), target, action="url주소입력"(폼이 제출될 때 데이터를 보낼 URL을 지정) 등
    <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<!-- form 태그 : 웹페이지에서 사용자로부터 데이터를 입력받아 처리하거나 서버에 데이터를 전송하는 데 사용 -->
<form 
  action="https://search.naver.com/search.naver"
  autocomplete="off"
  target="_blank"
  novalidate
>
  <input type="email" name="query">
  <button>확인</button>
</form>
```

[Input]

  • 정의 : HTML에서 사용자로부터 데이터를 입력받기 위한 요소
  • 형식 : <input type=""> (empty tag, inline 요소임)
  • Attributes :
    (1) type="select(드롭다운 리스트), text, password, email, checkbox(복수선택 체크박스), radio(단일선택 체크박스), number, range(슬라이더), file, tel 등"
    버튼, 텍스트박스(textarea), 드롭다운리스트(select) 경우 시멘틱 태그를 위하여 type태그로 처리하지 않고, <button></button>, <textarea></textarea> 사용할 것을 권장
    - password : 보안을 위해 데이터가 보이지 않도록 별표나 점으로 표시됨
    - email : 유효성 검사 없애려면 input 태그가 아닌 form 태그에 attribute로 설정해야 함
    - checkbox(복수선택 체크박스) :
    ! 체크박스 그룹화(<input type="" name="")>, 체크박스+텍스트 그룹화(<label></label>) 필요
    ! 체크박스와 체크박스와 연결된 텍스트가 떨어져 있을 경우,
    <input id="abc" type="">
    <label for="abc"></label>
    ! 다중항목 선택만 가능. 1항목 선택하려면 radio로 type 변경해야 함.
    - radio(단일 선택 체크박스) :
    ! 라디오 그룹화(<input type="" name="")>, 라디오+텍스트 그룹화(<label></label>) 필요
    ! 라디오와 라디오와 연결된 텍스트가 떨어져 있을 경우,
    <input id="abc" type="">
    <label for="abc"></label>
    ! default 선택 : checked attribute 사용
    - number(숫자입력박스) : max="", min="" 등의 attribute가 있음
    - range : 슬라이더(조절 바)
    - file :
    ! 다중파일 선택 : multiple
    <input type="file" multiple>
    ! 특정 형식 파일만 받기 : accept="mime형식 혹은 확장자 형식"
    <input type="file" multiple accept="image/*, application/pdf">
    <input type="file" accept=".pdf, .jpeg">
    - tel(전화번호) : required pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
    (2) textarea : rows, cols(텍스트 영역 너비. columns의 약자) 등의 attribute가 있음 텍스트 박스.
    (3) select(드롭다운 리스트) : selected(기본값), disabled(무효화) 등의 attrbute 사용 가능. <select><option><option></select>
    (4) button: attribute로 type="button/submit/reset"이 있음
    ! type="button(폼 제출 없음. javascript로 동작 정의)/submit(default 값. 폼 제출)/reset(폼 초기화페이지 입력 값 초기화)
    (5) placeholder : 사용자가 입력할 내용을 안내하는 힌트 텍스트. 서버로 전송되는 데이터에 포함되지 않음 (회색 글자)
    (6) value="" : 입력 필드의 초기값. 서버로 데이터 전송됨
    (7) disabled : 입력 필드 비활성화(입력창 회색으로 변함)
    (8) required : 필수 입력 값
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <form action="#">
   <p>input type="text"</p>
   <!-- placeholder : 사용자가 입력할 내용을 안내하는 힌트 텍스트. 서버로 전송되는 데이터에 포함되지 않음 (회색 글자)
        value=""` : 입력 필드의 초기값. 서버로 데이터 전송됨
        disabled` : 입력 필드 비활성화(입력창 회색으로 변함)-->
   <input type="text" placeholder="이름을 입력하세요." disabled>
   <br>
   <br>
   
   <p>input type="password"</p>
   <!-- password : 보안을 위해 데이터가 보이지 않도록 별표나 점으로 표시됨 -->
   <input type="password" required>
   <br>
   <br>
    
   p>input type="email"</p>
   <!-- email : default로 유효성 검사. 유효성 검사 해제할면 input이 아닌 form 태그에 novalidate -->
   <input type="email" value="abc">
   <br>
   <br>
   
   <p>input type="checkbox"</p>
   <!-- checkbox :
      (1) 체크박스 그룹화(input type="" name=""), 체크박스+텍스트 그룹화(<label></label>) 필요
      (2) 체크박스와 체크박스와 연결된 텍스트가 떨어져 있을 경우,
          <input id="abc" type="">
          <label for="abc"></label>
      (3) 다중항목 선택만 가능. 1항목 선택하려면 radio로 type 변경해야 함. -->
 
   취미:
   <label>
     <input type="checkbox" name="hobby"> 운동 
   </label>
   
   <label>
     <input type="checkbox" name="hobby" checked> 명상
   </label>
   
   <label for="id"></label>
   
   <input id="breathe" type="checkbox" name="hobby"> 
   <br>
   <br>

<p>input type : radio</p>
   <!-- radio : 단일선택 체크박스
      (1) 그룹화(input type="" name=""), 그룹화(<label></label>) 필요
      (2) radio와 연결된 텍스트가 떨어져 있을 경우,
          <input id="abc" type="">
          <label for="abc"></label>
      (3) default 선택 값 : checked 사용-->
   
   <label>
     <input type="radio" name="" checked> 아니용
   </label>
   약관 동의: 
   <label><input type="radio" name="agree" checked> 예</label>
   <label><input type="radio" name="agree"> 아니오</label>

   <br>
   <br>

   <p>input type : number</p>
   <!-- number : 숫자입력박스 -->
   <input type="number" value="0" max="5" min="0">
   <br>
   <br>

   <p>input type : range</p>
   <!-- range : 슬라이드 바 -->
   <input type="range" value="3" max="5" min="1">
   <br>

   <p>input type : file</p>
   <!-- (1) 다중파일 선택 : multiple
        (2) 특정 형식 파일만 받기 : accept="mime형식 혹은 확장자 형식"
            <input type="file" multiple accept="image/*, application/pdf">
            <input type="file" accept=".pdf, .jpeg"> -->
   <input type="file" multiple accept="image/*, pdf/*">
   <input type="file" multiple accept=".jpeg, .pdf">
   <br>
   <br>
 <p>input type : textarea(텍스트박스)</p>
   <!--textarea(텍스트박스) attribute : rows, cols(텍스트 영역 너비. columns의 약자)-->
   <textarea rows="5" cols="10"></textarea>
   <br>
   <br>

   <p>드롭다운리스트(select)</p>
    <!-- select(드롭다운 리스트)
        (1) selected(기본값), disabled(무효화) 등의 attrbute 사용 가능.
        (2) <select><option><option></select>`-->
   <select>
     <option>아메리카노</option>
     <option disabled>카페라떼</option>
     <option selected>카푸치노</option>
   </select>
   <br> <br> 

   <p>button</p>
   <!-- button의 type 종류 : button(폼 제출 x, javascript의 동작 정의), submit(폼 제출), reset(폼 입력 값 초기화) -->
   <button type="button">버튼</button>
   <!-- type을 생략하면 submit이 기본 -->
   <button type="submit">전송</button>
   <button type="reset">초기화</button>

   <input type="button" value="버튼2">

   <label for="breathe">숨쉬기</label>
 
 <p>input type : tel(휴대폰 전화번호)</p>
 <!-- input type : tel
      주요 attribute : required pattern="[허용숫자-허용숫자]{자리수}"-->
 <label for="phone">전화번호:</label>
 <input type="tel" id="phone" required pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"><br><br>
 <small>형식: 123-456-7890</small><br><br>
 </form>
 <br> 
</body>
</html>
profile
코딩기록

0개의 댓글