HTML form

20 Aug 2021 - 2 minute read

HTML form

---

• Java에서 Scanner클래스를 사용해 사용자로부터 입력을 받는 것 처럼, HTML에서도 사용자로부터의 입력을 받을 수 있는데, 이 때 form요소를 사용한다. Java 스캐너클래스는 입력 자료형이 다양한데 비해, form은 자료형은 모두 텍스트형/문자형이지만, 파일전송이 가능한 등 입력 형태가 다양하다.

• 이 입력받은 데이터는 한 번에 서버로 전송되는데, 이 전송된 데이터는 웹 서버가 처리하고, 결과에 따른 새로운 html 페이지를 웹 서버로, 웹서버는 받은 html 페이지를 브라우저로 보낸다. 브라우저는 받은 html 페이지를 보여준다.

form attributes

---

• action : form 데이터가 전송되는 서버
  • form action=”경로명/파일명”
    다른 페이지로 전송할거면 action=”웹주소(ex) https://www.naver.com)”
    (전송하는건 아무 문제 없다 수신을 안해줄 뿐,,ㅋ)
  • action 없이 입력 시 원래 페이지(자기자신)으로 전송
• method : 데이터 전송 방법
  • post
    • 데이터를 url에 공개하지 않고 숨겨서 전송
    • 데이터 전송 용량에 제한이 없음
  • get : 기본값 / URL?name=value&name=value와 같이 표시됨

• name : form의 이름, 서버로 보내질 때 이 이름의 값으로 데이터가 전송됨

• enctype : 폼 데이터가 서버로 전달되었을 때 데이터가 인코딩되는 방법 / method 속성값이 post인 경우에만 사용 가능

• ex) action.php로 폼 데이터 전달하기

<form action="/action.php" method="get">
  First name <input type="text" name="fname"><br>
  Last name <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

First name
Last name

form elements

---

• <input> : 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줌, type 속성에 따라 다양한 형태로 나타낼 수 있음

• <label>
  • label요소가 사용된 텍스트를 클릭하면 radio buttons나 checkboxes가 체크됨
  • input요소 안 id 속성과 함께 사용되어야 함

• <select> : <option>요소와 함께 사용되며, selected 속성을 쓰면 화면에 그 option이 선택되어 보여진다.

• <textarea>
  • 여러 줄의 텍스트 입력
  • rows : / cols :
  • 시작/종료태그 사이 엔터나 공백 X

• <button> : 클릭 가능한 버튼

• <fieldset> : 관련 있는 폼 데이터들을 그룹화 /

• <legend> : fieldset 태그 하위에 사용하여 그룹화한 폼 요소들에 이름 지정

input types

---

• <input type="text"> : 한 줄 텍스트 입력란

• <input type="password"> : 비밀번호 입력란, 입력 내용 보이지 않음

• <input type="radio"> : 단일 선택 버튼 / name속성 값이 동일해야 radio버튼 단일 선택 가능

• <input type="checkbox"> : 다중 선택 버튼

• <input type="button"> : 기능이 없으나 JavaScript에서 사용하기 위해 사용

• <input type="submit"> : 폼 데이터를 서버로 전송하기 위한 버튼

• <input type="reset">
  • 모든 값을 초기값으로 리셋
  • = <button type="reset">reset</button>
• <input type="file">
  • 파일 선택/업로드 버튼
  • form요소 아래 method=”post” / enctype=multipart/form-data” 두 가지 속성 필수
• <input type="hidden"> : 사용자용 X, 사용자가 전송할 때 개발자가 데이터 구분 또는 식별을 위해 숨겨서 전송하는 데이터에 사용 ex) 코드번호, DB의 PK, …

input attributes

---

• value : 입력 필드에 입력되어있는 초기값

• placeholder : 입력되어야 하는 값에 대한 short hint (샘플값이나 짧은 설명)

• required : 꼭 채워져야 하는 필드 / 전화번호, 이메일, 비밀번호 등에 사용됨

ex)

---

<form>
    <input type="text" value="초기입력값">
    <input type="text" placeholder="아이디는 8글자 이상" required>

    <input type="password">

    <fieldset>
        <legend>성별</legend>
            <input type="radio" name="gender"> 남자
            <input type="radio" name="gender"> 여자
            <input type="radio" name="gender" checked> 선택안함
    </fieldset>

    <fieldset>
        <legend>취미</legend>
            <input type="checkbox"> 영화감상
            <input type="checkbox"> 독서
            <input type="checkbox"> 맛집탐방
    </fieldset>

    <input type="reset" value="초기화">
    <input type="submit" value="전송">
    <input type="button" value="버튼">
    파일전송<input type="file">

    <fieldset>
        <legend>선택메뉴</legend>
        <select name="" id="">
            <option value="">menu1</option>
            <option selected>menu2</option>
            <option value="">menu3</option>
        </select>
    </fieldset>

    <textarea rows="5" cols="50"></textarea>
</form>

성별

남자 여자 선택안함

취미

영화감상 독서 맛집탐방

파일전송

선택메뉴

menu1 menu2 menu3