[HTML] Form, Input

2021. 1. 11. 19:23ㆍHTML&CSS&JavaScript

<form 태그>

form 태그에서 주요한 속성은 두 가지가 있다. 바로 action과 method이다. action은 데이터를 전달할 대상을 지정하고, method는 전달 방식을 정한다.

  • action: 수신 대상, 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시, 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 함
  • method: 전송 방식, 입력받은 데이터를 서버에 전달할 방식을 명시

 

<input 태그>

HTML에서는 다양한 타입의 input 요소를 이용하여 사용자로부터 입력을 받을 수 있다.

1. 텍스트 입력(text):

  • type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다.
<form action="/examples/media/request.php">

    검색할 내용을 입력하세요 :

    <input type="text" name="search">

</form>

2. 비밀번호 입력(password):

  • type 속성값을 "password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있다.
  • 비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시된다.
<form>

    사용자 : <br><input type="text" name="username"><br>

    비밀번호 : <br><input type="password" name="password">

</form>

3. 라디오 버튼(radio):

  • type 속성값을 "radio"로 설정하면, 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있다.
  • 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.
  • (checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.)
<form>

    <input type="radio" name="lecture" value="html" checked> HTML <br>

    <input type="radio" name="lecture" value="css"> CSS <br>

    <input type="radio" name="lecture" value="java"> JAVA <br>

    <input type="radio" name="lecture" value="cpp"> C++

</form>

4. 체크박스(checkbox):

  • type 속성값을 "checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다.
  • 체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있다.
  • 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.
  • (checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다. 또한, disabled 속성을 이용하여 해당 옵션을 선택할 수 없게 설정할 수도 있다.)

 

<form>

    <input type="checkbox" name="lecture" value="html" checked> HTML <br>

    <input type="checkbox" name="lecture" value="css"> CSS <br>

    <input type="checkbox" name="lecture" value="java"> JAVA <br>

    <input type="checkbox" name="lecture" value="cpp" disabled> C++

</form>

5. 파일 선택(file):

  • type 속성값을 "file"로 설정하면, 사용자로부터 파일을 전송받을 수 있다.
  • accept 속성을 이용하여 입력받을 수 있는 파일의 확장자 및 종류를 명시할 수 있다.
<form>

    <input type="file" name="upload_file" accept="image/*">

</form>

6. 선택 입력(select):

  • select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그중에서 단 하나의 옵션만을 입력받을 수 있다.
  • option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시한다.
  • (selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.)
<select name="fruit">

    <option value="apple"> 사과

    <option value="orange" selected> 귤

    <option value="strawberry"> 딸기

    <option value="peach"> 복숭아

</select>

7. 문장 입력(textarea):

  • textarea 요소는 여러 줄의 텍스트를 입력받을 수 있다.
  • rows 속성과 cols 속성을 이용하여 textarea 요소의 크기를 자유롭게 지정할 수 있다.
<textarea name="message" rows="5" cols="30">

    여기에 적으세요.

</textarea>

8. 버튼 입력(button):

  • button 요소는 누를 수 있는 버튼을 나타낸다.
<button type="button" onclick="alert('버튼을 클릭하셨군요!')">

    버튼을 눌러주세요.

</button>

9. 전송 버튼(submit):

  • type 속성값을 "submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼을 만들 수 있다.

※폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미, 이러한 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있다.

<form action="/examples/media/request.php">

    어릴 때 자신의 별명을 적어주세요 : <br>

    <input type="text" name="nickname" value="별명"><br><br>

    <input type="submit" value="전송">

</form>

10. 필드셋(fieldset):

  • fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할을 한다.
  • legend 요소는 fieldset 요소 안에서만 사용할 수 있으며, fieldset 요소의 제목을 나타낸다.
<form action="/examples/media/request.php">

    <fieldset>

        <legend>입력 양식</legend>

        이름 : <br>

        <input type="text" name="username"><br>

        이메일 : <br>

        <input type="text" name="email"><br><br>

        <input type="submit" value="전송">

    </fieldset>

</form>

 

그 외

readonly: 읽기만 가능한 속성
maxlength: 글자수 제한 속성

<HTML>

<h1>네이버 검색</h1>
<form action="https://search.naver.com/search.naver" target="_blank">
  <input type="text" name="query">
  <input type="submit" value="발송">
</form>

<h1>글쓰기 폼 v1</h1>
<form action="/jspCommunity/usr/article/doWrite" target="_blank">
  <input type="text" name="memberId" value="1">
  <hr>
  <input type="text" name="boardId" value="1">
  <hr>
  <input type="text" name="title" placeholder="제목을 입력해주세요.">
  <hr>
  <input type="text" name="body" placeholder="내용을 입력해주세요.">
  <hr>
  <input type="submit" value="전송">
</form>

<h1>글쓰기 폼 v2</h1>
<form action="/jspCommunity/usr/article/doWrite" target="_blank">
  <input type="number" name="memberId" value="1">
  <hr>
  <input type="number" name="boardId" value="1">
  <hr>
  <input type="text" name="title" placeholder="제목을 입력해주세요.">
  <hr>
  <input type="text" name="body" placeholder="내용을 입력해주세요.">
  <hr>
  <input type="submit" value="전송">
</form>

<h1>글쓰기 폼 v3</h1>
<form action="/jspCommunity/usr/article/doWrite" target="_blank">
  <input type="number" name="memberId" value="1" readonly>
  <hr>
  <input type="number" name="boardId" value="1" readonly>
  <hr>
  <input type="text" name="title" placeholder="제목을 입력해주세요.">
  <hr>
  <input type="text" name="body" placeholder="내용을 입력해주세요.">
  <hr>
  <input type="submit" value="전송">
</form>

<h1>글쓰기 폼 v4</h1>
<form action="/jspCommunity/usr/article/doWrite" target="_blank">
  <input type="hidden" name="memberId" value="1">
  <hr>
  <input type="hidden" name="boardId" value="1">
  <hr>
  <input type="text" name="title" placeholder="제목을 입력해주세요.">
  <hr>
  <input type="text" name="body" placeholder="내용을 입력해주세요.">
  <hr>
  <input type="submit" value="전송">
</form>

<h1>글쓰기 폼 v5</h1>
<form action="/jspCommunity/usr/article/doWrite" target="_blank">
  <input type="hidden" name="memberId" value="1">
  <hr>
  <input type="hidden" name="boardId" value="1">
  <hr>
  <input type="text" name="title" placeholder="제목을 입력해주세요." maxlength="100">
  <hr>
  <input type="text" name="body" placeholder="내용을 입력해주세요." maxlength="1000">
  <hr>
  <input type="submit" value="전송">
</form>

<h1>글쓰기 폼 v6</h1>
<form action="/jspCommunity/usr/article/doWrite" target="_blank">
  <input type="hidden" name="memberId" value="1">
  <hr>
  <input type="hidden" name="boardId" value="1">
  <hr>
  <input type="text" name="title" placeholder="제목을 입력해주세요." maxlength="100">
  <hr>
  <textarea name="body" placeholder="내용을 입력해주세요." maxlength="1000"></textarea>
  <hr>
  <input type="submit" value="전송">
</form>

<h1>글쓰기 폼 v7</h1>
<form action="/jspCommunity/usr/article/doWrite" method="POST" target="_blank">
  <input type="hidden" name="memberId" value="1">
  <hr>
  <input type="hidden" name="boardId" value="1">
  <hr>
  <input type="text" name="title" placeholder="제목을 입력해주세요." maxlength="100">
  <hr>
  <textarea name="body" placeholder="내용을 입력해주세요." maxlength="1000"></textarea>
  <hr>
  <input type="submit" value="전송">
</form>

 

<결과>

codepen.io/cjy324/full/jOMvBrr

 

Form 개념

...

codepen.io

 

저작자표시

'HTML&CSS&JavaScript' 카테고리의 다른 글

[HTML&CSS] GASP  (0) 2021.01.23
[HTML&CSS] Overflow  (0) 2021.01.23
[HTML&CSS] Favicon  (0) 2020.12.24
20.12.22 toastui-editor 활용 youtube plugin 추가  (1) 2020.12.22
[HTML&CSS] Open Graph  (0) 2020.12.21

관련글

댓글 0

티스토리툴바