사용자와의 커뮤니케이션을 위한 폼 태그

2023. 1. 27. 17:19

form

form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있음

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>


    <form>
    ...
    form elements (input, checkbox, radio button, submit button...)
    ...
    </form>


</body>
</html>

GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며

HTTP request method라 함

GET

GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식
예) http://jsonplaceholder.typicode.com/posts?userId=1&id=1

전송 URL 바로 뒤에 ‘?’를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가

1개 이상의 전송 데이터는 ‘&’로 구분

URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있음. (최대 255자)

REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청

POST

POST 방식은 Request Body에 담아 보내는 방식

URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느림

REST API에서 POST 메소드는 특정 리소스의 생성을 요청

전에 미니프로젝트했던거 참고

https://cojun.tistory.com/16

2023-01-12 4주차 Flask, GET, POST, API

Flask 시작 1. 서버 만들기 from flask import Flask app = Flask(__name__) @app.route('/') def home(): return 'This is Home!' if __name__ == '__main__': app.run('0.0.0.0',port=5000,debug=True) from flask import Flask app = Flask(__name__) @app.route('/

cojun.tistory.com

input

input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용

input 태그는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분

form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 됨

서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로하여 key=value의 형태로 전송

<!DOCTYPE html>
<html>
  <body>
    <h3>button</h3>
    <input type="button" value="Click me" onclick="alert('Hello world!')">
    <hr>

    <h3>checkbox</h3>
    <input type="checkbox" name="fruit1" value="apple" checked> 사과<br>
    <input type="checkbox" name="fruit2" value="grape"> 포도<br>
    <input type="checkbox" name="fruit3" value="peach"> 복숭아<br>
    <hr>

    <h3>color</h3>
    <input type="color" name="mycolor">
    <hr>

    <h3>date</h3>
    <input type="date" name="birthday">
    <hr>

    <h3>datetime</h3>
    <input type="datetime" name="birthdaytime">
    <hr>

    <h3>datetime-local</h3>
    <input type="datetime-local" name="birthdaytime">
    <hr>

    <h3>email</h3>
    <input type="email" name="useremail">
    <hr>

    <h3>file</h3>
    <input type="file" name="myfile">
    <hr>

    <h3>hidden</h3>
    <input type="hidden" name="country" value="Norway">
    hidden filed는 사용자에 표시되지 않는다.
    <hr>

    <h3>image</h3>
    <input type="image" src="img/img_submit.gif" alt="Submit" width="48" height="48">
    <hr>

    <h3>month</h3>
    <input type="month" name="birthdaymonth">
    <hr>

    <h3>number</h3>
    <input type="number" name="quantity" min="2" max="10" step="2" value="2">
    <hr>

    <h3>password</h3>
    <input type="password" name="pwd">
    <hr>

    <h3>radio</h3>
    <input type="radio" name="gender" value="male" checked> 남자<br>
    <input type="radio" name="gender" value="female"> 여자<br>
    <hr>

    <h3>range</h3>
    <input type="range" name="points" min="0" max="10" step="1" value="5">
    <hr>

    <h3>reset</h3>
    <input type="reset">
    <hr>

    <h3>search</h3>
    <input type="search" name="googlesearch">
    <hr>

    <h3>submit</h3>
    <input type="submit" value="Submit">
    <hr>

    <h3>tel</h3>
    <input type="tel" name="mytel">
    <hr>

    <h3>text</h3>
    <input type="text" name="myname">
    <hr>

    <h3>time</h3>
    <input type="time" name="mytime">
    <hr>

    <h3>url</h3>
    <input type="url" name="myurl">
    <hr>

    <h3>week</h3>
    <input type="week" name="week_year">
  </body>
</html>

select

복수개의 리스트에서 복수개의 아이템을 선택할 때 사용

서버에 전송되는 데이터는 select 요소의 name 어트리뷰트를 키로, option 요소의 value 어트리뷰트를 값으로하여 key=value의 형태로 전송

함께 사용할 수 있는 태그는 다음과 같다

<!DOCTYPE html>
<html>
  <body>
    <select name="cars1">
      <option value="volvo" selected>Volvo</option>
      <option value="saab" disabled>Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>

    <select name="cars2" size="4" multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi" selected>Audi</option>
    </select>

    <select name="cars3">
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <optgroup label="German Cars" disabled>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
    </select>
  </body>
</html>

textarea

textarea 태그는 여러 줄의 글자를 입력할 때 사용

<!DOCTYPE html>
<html>
  <body>
    <textarea name="message" rows="10" cols="30">Write something here</textarea>
  </body>
</html>

button

button 태그는 클릭할 수 있는 버튼을 생성

<input type="button">과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않음

button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있음

<!DOCTYPE html>
<html>
  <body>
    <button type="button" onclick="alert('Hello World!')">Click Me!</button>

    <input type="button" value="Click Me!" onclick="alert('Hello world!')">
  </body>
</html>

button 태그는 어트리뷰트만을 받아들이는 input 태그와 달리 콘텐츠로 문자열은 물론 HTML 요소를 받을 수도 있다는

장점이 있

오래된 IE를 지원해야 한다면 input 태그를 사용하는 것이 바람직

fieldset / legend

fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용

legend 태그는 fieldset 태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
      <fieldset>
        <legend>Login(제목 정의)</legend>
        Username <input type="text" name="username">
        Password <input type="text" name="password">
      </fieldset>
  </body>
</html>

저작자표시

'HTML' 카테고리의 다른 글

이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그 (0)	2023.01.27
목록(List)와 표(Table) 형식 표현을 위한 태그 (0)	2023.01.27
Hyperlink (0)	2023.01.27
텍스트 관련 태그 (0)	2023.01.26
웹페이지의 구성하는 기본 태그 (1)	2023.01.26

CO_JUN 개발일지