본문 바로가기
기타/글로컬청년취업사관학교

[TIL] 240625

쥬크버그 2024. 6. 25. 16:26

Form 

 

- 사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획

- 입력한 데이터를 제출, 전송하기 위해 사용하는 태그 

 

ex) 단순히 입력받은 값을 화면에 뿌려주는 용도 

<!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>
  <label>이름
    <input id="text" type="text">
</label>
<button id="button" type="button">입력</button>
<p>이름:<strong id="strong"></strong></p>
<script>
    const inputText = document.querySelector('#text');
    const button = document.querySelector('#button');
    const strong = document.querySelector('#strong');
    button.addEventListener('click', function () {
        strong.innerHTML = inputText.value;
    })
</script>
</body>
</html>

 

 

 

method 속성

 

- 양식을 제출할 때 사용할 HTTP 메서드 

 

1) POST

 

- 양식 데이터를 요청 본문으로 전송

- 브라우저에 의해 캐시되지 않고, 브라우저 히스토리에도 남지 않음

- POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송

- 데이터의 길이제한이 없고, GET  방식보다는 보안성이 높음 

- enctype 속성

  -> method 특성이 POST인 경우 enctype은 양식 제출 시 데이터의 MIME 타입을 나타낸다. 

 

MIME 타입

- 클라이언트에 전송된 문서의 다양성을 알려주기 위한 메커니즘

- 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지 결정하기 위해 사용

 

 

- application/x-www-from-urlencoded: 기본 값 

- multipart/form-data  : <input type="file">이 존재하는 경우 사용 

<!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
action="http://localhost:8000/"
method="post"
enctype="multipart/form-data"
>
<input type="text" name="myTextField">
<input type="checkbox" name="myCheckBox">Check</input>
<input type="file" name="myFile">
<button>Send the file</button>
</form>
</body>
</html>

  

 

2) Get

 

- https://example.com?name=홍길동&age=20

- 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송

- GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장

- 보통 쿼리 문자열에 포함되어 전송되므로 길이의 제한이 있음

- 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청 

 

- 이름/값(name/value)의 짝으로 양식과 함께 전송 

 

 

 

action 속성

- 작성된 양식 데이터를 처리할 프로그램의 URL를 적어준다. 

- 이 속성을 지정하지 않으면 데이터는 form이 있는 페이지의 URL로 보내진다. 

 

autocomplete 속성

- 입력요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타낸다. 

- 이전에 해당 양식의 입력된 값이 있을 경우 (브라우저에 기록이 남아있을 경우 나타난다)

 

<input type="email" autocomplete="on"/>

 

 

label

 

- 사용자 인터페이스의 항목

- input과 함께 사용 

 

1) for-id를 이용해 연결

 

<label for="user-id">아이디</label>
<input id="user-id" type="text">

 

 

2) label 안에 input 중첩하여 연결

 

<lavel>
	아이디
    <input type="text">
</label>

 

cf. type="button" 선언과 유효한 value 속성을 가진 input 요소에는 레이블이 필요하지 않다. 

<input type="button" value="button">
<button type="button">button</button>

 

 

button 

 

- 사용자가 클릭할 수 있는 요소 

- form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있다.

 

- 타입

button - 클릭했을 때 아무것도 하지 않음
- JavaScript와 연결하여 사용
submit - 서버로 양식 데이터를 제출
reset - 초깃값으로 되돌림 

 

 

input

 

공통 속성 

 

type input 양식 컨트롤의 유형 (button, text, email, file...)
name input 양식 컨트롤의 이름
value input 양식 컨트롤의 값
autocomplete on/off 양식 자동완성 기능에 대한 힌트
placeholder 양식 컨트롤이 비어있을 때 나타내는 내용
required 양식 전송을 위해 필수로 입력해야 하는 값
disabled 비활성화
readonly 수정불가 ( 읽기 전용) 

 

 

 

<!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>
  <input type="text">
<input type="password">
<input type="tel">
<input type="number">
<input type="url">
<input type="search">
<input type="email">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="button">
<input type="image" src="https://www.gstatic.com/youtube/img/creator/yt_studio_logo_white.svg
">
<input type="hidden">
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">
<input type="range">
<input type="color">
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_minlength
</body>
</html>

checkbox 

 

- 단일 값을 선택하거나 선택 해제할 수 있는 체크박스 

 

<!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>
  <fieldset>
    <legend>사용 기술</legend>

    <input type="checkbox" name="html" id="html">
    <label for="html">HTML</label>

    <input type="checkbox" name="css" id="css">
    <label for="css">CSS</label>

    <input type="checkbox" name="js" id="js">
    <label for="js">JavaScript</label>

    <input type="checkbox" name="python" id="python">
    <label for="python">Python</label>
    
    <input type="checkbox" name="django" id="django">
    <label for="django">Django</label>
  </fieldset>
</body>
</html>

 

 

 

radio

- 같은 name 값을 가진 여러개의 선택 중에서 하나의 값을 선택 

 

<!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>
  <fieldset>
    <legend>성별</legend>
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">남성</label>
    <input type="radio" name="gender" value="females" id="fem
    <label for="female">여성</label>
    <input type="radio" name="gender" value="no" id="no">
    <label for="no">선택 안함</label>
    </fieldset>
</body>
</html>

 

 

 

 

file

 

- 파일을 지정할 수 있다. 

- accept : 허용하는 파일 유형을 지정

- multiple : 지정할 경우 사용자가 여러개의 파일을 선택

 

<!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>
  <label for="profile">프로필 이미지</label>
  <input
    type="file"
    id="profile"
    name="profile"
    accept="image/png, image/jpeg"
  >
</body>
</html>

 

 

 

 

Table

 

- 테이블을 생성할 때 사용 

- <table>은 테이블 데이터의 컨테이너 요소 

 

tr,th,td

 

- tr : table row, 테이블의 행

- th : table header, 테이블의 행, 열의 제목을 나타내는 셀

- td : table data, 셀 내용 

 

caption

- 테이블의 제목이나 설명

- table의 첫 번째 자식으로 사용해야 함

- 필수 요소는 아님

 

<table>
	<caption>설명</caption>
    <!-- 생략 -->
</table>

 

 

thead, tbody, tfoot

 

- 테이블의 머리글, 본문, 바닥글

- 구역을 나누는 요소로 사용 

- 필수 요소 아님

- thead : 테이블의 행 블록 내에 제목 열 그룹으로 구성할 경우 사용

- tbody : 행 블록 내에 테이블 데이터로 구성할 때 사용

- tfoot : 행 블록 내에 열 요약로 구성할 때 사용 

 

<!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>
  <table>
    <caption>Items Sold August 2016</caption>
    <tbody>
    <tr>
    <td colspan="2" rowspan="2">&nbsp;</td>
    <th colspan="3">Clothes</th>
    <th colspan="2">Accessories</th>
    </tr>
    <tr>
    <th>Trousers</th>
    <th>Skirts</th>
    <th>Dresses</th>
    <th>Bracelets</th>
    <th>Rings</th>
    </tr>
    <tr>
    <th rowspan="3">Belgium</th>
    <th>Antwerp</th>
    <td>56</td>
    <td>22</td>
    <td>43</td>
    <td>72</td>
    <td>23</td>
    </tr>
    <tr>
    <th>Gent</th>
    <td>46</td>
    <td>18</td>
    <td>50</td>
    <td>61</td>
    <td>15</td>
    </tr>
    <tr>
      <th>Brussels</th>
      <td>51</td>
      <td>27</td>
      <td>38</td>
      <td>69</td>
      <td>28</td>
      </tr>
      <tr>
      <th rowspan="2">The Netherlands</th>
      <th>Amsterdam</th>
      <td>89</td>
      <td>34</td>
      <td>69</td>
      <td>85</td>
      <td>38</td>
      </tr>
      <tr>
      <th>Utrecht</th>
      <td>80</td>
      <td>12</td>
      <td>43</td>
      <td>36</td>
      <td>19</td>
      </tr>
      </tbody>
      </table>
</body>
</html>

 

 

 

'기타 > 글로컬청년취업사관학교' 카테고리의 다른 글

[글로벌청년취업사관학교][TIL] 240627  (0) 2024.06.27
[TIL] 240626  (0) 2024.06.26
[TlL] 240624  (0) 2024.06.25
[TlL] 240621  (0) 2024.06.21
[TlL] 240620  (0) 2024.06.20

'기타/글로컬청년취업사관학교' Related Articles

티스토리툴바