본문 바로가기
Web/HTML

#7. Form & Tags

도톤팽이 2023. 2. 27. 14:30
728x90

1. Form

form태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea등 여러 입력 양식 태그를 포함할 수 있다.

    <form action="friends.html" method="get" id="login-form">
      <input name="username" type="text" placeholder="Email or phone number" />
      <input name="password" type="password" placeholder="Password" />
      <input type="submit" value="Log In" />
    </form>

 

form태그의 어트리뷰트로는 다음과 같다.

action URL 입력 데이터가 전송 될 URL지정
method get / post 입력 데이터 전달 방식 지정

get과 post는 HTTP프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타낸다.

 

GET

  • GET방식은 전송 URL에 입력데이터를 쿼리스트링으로 보내는 방식이다.
  • 전송 URL바로 뒤에 "?" 를 통해 데이터의 시작을 알려주고 key-value형태의 데이터를 추가한다. 1개 이상의 전송데이터는 "&"로 구분한다.
  • URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있다. (최대 255자)

POST

  • POST방식은 Request Body에 담아 보내는 방식이다.
  • URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.

2. Input

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

  <body>
    <h3>Button</h3>
    <input type="button" value="Click!" />

    <h3>CheckBox</h3>
    <input type="checkbox" value="1" checked />
    <input type="checkbox" value="2" />

    <h3>Color</h3>
    <input type="color" />

    <h3>Date</h3>
    <input type="date" />

    <h3>DateTime</h3>
    <input type="datetime" />

    <h3>DateTime-Local</h3>
    <input type="datetime-local" />

    <h3>Email</h3>
    <input type="email" placeholder="Write Your Email." />

    <h3>File</h3>
    <input type="file" />

    <h3>Hidden</h3>
    <input type="hidden" />

    <h3>Image</h3>
    <input
      type="image"
      src="https://w7.pngwing.com/pngs/385/31/png-transparent-arrow-computer-icons-encapsulated-postscript-arrow-angle-image-file-formats-hand-thumbnail.png "
      width="100"
      height="100"
    />

    <h3>Month</h3>
    <input type="month" />

    <h3>Number</h3>
    <input type="number" placeholder="Write Your Number" />

    <h3>PassWord</h3>
    <input type="password" placeholder="Your PassWord" />

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

    <h3>Range</h3>
    <input type="range" min="0" max="10" step="1" value="0" />

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

    <h3>Search</h3>
    <input type="search" placeholder="Search Your Questions" />

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

    <h3>Tel</h3>
    <input type="tel" placeholder="Write Your Tel Number." />

    <h3>Text</h3>
    <input type="text" placeholder="Write Your Name." />

    <h3>time</h3>
    <input type="time" />

    <h3>URL</h3>
    <input type="url" placeholder="Write Your URL." />

    <h3>Week</h3>
    <input type="week" />
  </body>
Document

Button

CheckBox

Color

Date

DateTime

DateTime-Local

Email

File

Hidden

Image

Month

Number

PassWord

Radio

남자
여자

Range

Reset

Search

Submit

Tel

Text

time

URL

Week

button 사용자가 누를 수 있는 버튼을 생성한다.
checkbox 중복체크가 가능한 체크박스를 생성한다.
color 컬러를 선택할 수 있는 컬러창을 생성한다.
date 년, 월, 일을 선택할 수 있는 날짜창을 생성한다.
datetime 년, 월, 일, 시, 분, 초를 선택할 수 있는 날짜창을 생성한다.
datetime-local 지역 년, 월, 일, 시, 분, 초를 선택할 수 있는 날짜창을 생성한다.
email 이메일을 입력할 수 있는 창을 생성한다.
file 파일을 선택할 수 있는 창을 생성한다.
hidden 감추어진 form을 생성한다.
image 이미지를 올릴 수 있는 버튼을 생성한다.
month 월을 선택할 수 있는 창을 생성한다.
number 숫자를 입력할 수 있는 창을 생성한다.
password 비밀번호를 입력할 수 있는 창을 생성한다.
radio 중복선택이 불가능한 선택버튼을 생성한다.
range 범위가 선택이 가능한 창을 생성한다.
reset 초기화 버튼을 생성한다.
search 검색이 가능한 창을 생성한다.
submit 제출버튼을 생성한다.
tel 전화번호가 입력 가능한 창을 생성한다.
text 텍스트를 입력 가능한 창을 생성한다.
time 시간이 선택가능한 창을 생성한다.
url 주소를 입력 가능한 창을 생성한다.
week 주를 선택할 수 있는 창을 생성한다.

 

Input태그에는 각각의 타입별로 다양한 어트리뷰트가 존재한다.

자세한 내용은 아래 문서를 참조해보도록 하자.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/input

 

<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN

HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입

developer.mozilla.org

3. Select

 <body>
    <select name="select1">
      <option value="subject1" selected>국어</option>
      <option value="subject2">수학</option>
      <option value="subject3">영어</option>
    </select>

    <select name="select2" size="3" multiple>
      <option value="subject1">국어</option>
      <option value="subject2">수학</option>
      <option value="subject3" selected>영어</option>
    </select>

    <select name="select1">
      <optgroup label="select1">
        <option value="subject1">국어</option>
        <option value="subject2">수학</option>
      </optgroup>
      <optgroup label="select2">
        <option value="subject3">영어</option>
        <option value="subject4">과학</option>
      </optgroup>
    </select>
  </body>
Document
select Select 창 생성
option Select내 옵션 생성
optgroup Select내 옵션들 그룹화

4. TextArea / Button

  <body>
    <textarea name="message" rows="5" cols="20">Write Your Quote Here.</textarea>
    <button type="button">Click Here!</button>
  </body>
Document

TextArea는 여러줄의 글자를 입력할 때 사용한다.

 

button태그는 클릭할 수 있는 버튼을 생성한다. input에서 사용할 수 있는 버튼과 유사하지만 button태그의 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.

 

그러므로 type어트리뷰트는 반드시 지정하는 것이 바람직하며 어트리뷰트값으로 reset, submit등등을 지정할 수 있다.

6. Fieldset / Legend

  <body>
    <fieldset>
      <legend>Login</legend>
      ID<input type="text" name="username" placeholder="Write your id here." />
      Password<input type="password" name="password" placeholder="Write your password here."/>
    </fieldset>
  </body>
Document
Login ID Password

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

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

728x90
저작자표시 비영리 변경금지

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

#6. 이미지 & 멀티미디어  (0) 2023.02.27
#5. List & Table  (0) 2023.02.24
#4. HTML의 핵심 Link  (0) 2023.02.24
#3. 텍스트 관련 태그들 정리  (0) 2023.02.24
#2. head 요소의 여러가지 태그들  (0) 2023.02.21

'Web/HTML' Related Articles

티스토리툴바