[HTML] HTML 데이터 입력받기 / 버튼, 체크박스 생성하기 : <form>, <input>

개발/웹개발

[HTML] HTML 데이터 입력받기 / 버튼, 체크박스 생성하기 : <form>, <input>

섭교수 2022. 9. 6. 06:00

#HTML

데이터 입력받기

HTML에서 데이터를 입력받고 전송하기 위해서는 <form> 태그를 사용한다

위 형식을 따라 사용하며 action 속성에는 입력 데이터를 받아서 처리할 페이지의 URL을 넣으면 되고 method 속성에는 post, get, dialog 세 가지를 사용할 수 있다.

post 방식은 데이터를 별도로 첨부하여 전달하는 방식이며 보안성 및 활용성이 뛰어나다. get 방식은 주로 중요도가 낮은 데이터를 전송할 때 사용된다. dialog는 양식이 <dialog> 태그 내부에 위치한 경우 제출하는 동시에 form 대화상자를 닫는 속성이다.

다양한 데이터 입력 형식 : <input> 태그 사용하기

form 내부에 <input> 태그를 사용하여 다양한 데이터 입력의 형태를 적용할 수 있다.

아래는 버튼과 필드셋을 사용한 예시이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title> 실습 </title>
</head>
<body>
    <p>subprofessor</p>
    <!-- Form which will send a GET request to the current URL -->
    <form>
        <label>Name:
        <input name="submitted-name" autocomplete="name">
        </label>
        <button>Save</button>
    </form>
    
    <!-- Form which will send a POST request to the current URL -->
    <form method="post">
        <label>Name:
        <input name="submitted-name" autocomplete="name">
        </label>
        <button>Save</button>
    </form>
    
    <!-- Form with fieldset, legend, and label -->
    <form method="post">
        <fieldset>
        <legend>Title</legend>
        <label><input type="radio" name="radio"> Select me</label>
        </fieldset>
    </form>
</body>
</html>

결과

실습

subprofessor

사용할 수 있는 input의 종류는 다음과 같다.

유형	설명
button	기본 행동을 가지지 않으며 value을 레이블로 사용하는 푸시 버튼.
checkbox (en-US)	단일 값을 선택하거나 선택 해제할 수 있는 체크박스.
color (en-US)	색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줍니다.
date	날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어줍니다.
datetime-local (en-US)	날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력과, 시계 등을 열어줍니다.
email (en-US)	이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줍니다.
file	파일을 지정할 수 있는 컨트롤. accept 특성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다.
hidden (en-US)	보이지 않지만 값은 서버로 전송하는 컨트롤. 오른쪽 칸에 예제가 있지만 숨겨져서 안보이네요!
image (en-US)	src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 src를 누락한 경우 alt 특성의 텍스트를 대신 보여줍니다.
month (en-US)	연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다.
number (en-US)	숫자를 입력하기 위한 컨트롤. 스피너를 표시하고 지원되는 기본 확인을 추가합니다. 몇몇 장치에서는 동적 키패드들과 숫자 키패드를 표시합니다.
password (en-US)	값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다.
radio	같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼입니다.
range (en-US)	값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시합니다. 접속사 min 와 max 사이에 사용되며 수용가능한 값의 범위를 정의합니다.
reset (en-US)	양식의 내용을 디폴트값(기본값)으로 초기화하는 버튼. 권장되지 않습니다.
search (en-US)	검색문자열을 입력하는 한줄 텍스트 필드. 줄바꿈 문자는 입력값에서 자동으로 제거됩니다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함됩니다. 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신에 검색 아이콘을 표시합니다.
submit (en-US)	양식을 전송하는 버튼
tel (en-US)	전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다.
text (en-US)	디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다.
time (en-US)	시간대가 없는 시간값을 입력하는 콘트롤
url (en-US)	URL을 입력하는 필드. 텍스트 입력처럼 보이지만, 검증 매개변수가 있습니다. 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있습니다.
week (en-US)	시간대가 없는 주-년 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤입니다.

출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

기본적으로 <form> 태그 내부에서 사용되며 각 태그 별로 형식이 조금씩 다르다.

1. text

<form action="데이터를 처리할 페이지의 주소" method="데이터 처리방식">표시할텍스트<input type="text" name="데이터의이름"></form> 형식을 사용한다.

name 속성은 데이터를 받아 처리하는 페이지에서 사용되므로 무조건 써주는 것이 좋다.

아래 예시코드에서는 데이터를 전송할 곳을 지정해두지 않았다

<form>
    Enter the PW :<br>
    <input type="text" name="PW">
</form>

2. password

<form action="데이터를 처리할 페이지의 주소" method="데이터 처리방식">표시할텍스트<input type="password" name="데이터의이름"></form> 형식을 사용한다.

text와 유사한데 type을 password로 지정할 경우 입력한 텍스트가 검은색 동그라미로 가려진다.

3. radio

여러 개의 옵션 중 하나를 선택할 수 있는 type.

<form action="데이터를 처리할 페이지의 주소" method="데이터 처리방식">표시할텍스트<input type=" radio" name="데이터의이름" value="값1" checked(선택사항;초기화면에 체크되어 표시된다)><input type=" radio" name="데이터의이름" value="값2"><input type=" radio" name="데이터의이름" value="값3"></form> 형식을 사용한다.

이때 같은 radio type 옵션들은 반드시 같은 name 속성을 가지고 있어야 한다

<form>
성별를 입력해주세요:<br> 
<input type="radio" name="gender" value="m" checked>남자<br>
<input type="radio" name="gender" value="w">여자<br>
</form

4. checkbox

여러 개의 옵션 중 여러 개를 선택할 수 있는 type.

radio와 같은 형식을 가지며 마찬가지로 같은 checkbox 들은 반드시 같은 name 속성을 가지고 있어야 한다.

checked 속성을 사용할 수 있으며 disabled 속성을 사용해 해당 옵션을 선택할 수 없게 설정할 수도 있다.

<form>
듣고 싶은 과목를 입력해주세요:<br>   
<input type="checkbox" name="subject" value="C" checked>C언어<br>
<input type="checkbox" name="subject" value="JAVA">자바<br>
<input type="checkbox" name="subject" value="HTML">HTML<br>
<input type="checkbox" name="subject" value="CSS">CSS<br>
<input type="checkbox" name="subject"value="python" disabled>Python<br>
</form>

5. file : 파일 업로드(파일 선택)

<form action="데이터를 처리할 페이지의 주소" method="데이터 처리방식">표시할텍스트<input type="file" name="데이터의이름" accept="허용할 파일의 확장자 및 종류"></form> 형식을 사용한다.

<form>
업로드 할 파일을 입력해주세요:<br>   
<input type="file" name="upload" accept="video/*">
</form>

accept 속성에는 확장자를 사용할 수도 있고 종류를 입력할 수도 있다.

<input type="file" accept="image/*,.pdf">

6. textarea : 텍스트상자

<form action="데이터를 처리할 페이지의 주소" method="데이터 처리방식">표시할텍스트<textarea name="이름" rows="m" cols="n"></textarea></form> 형식을 사용한다.

<p>subprofessor</p>
<form>
    Memo:<br>   
    <textarea name="memo" rows="30" cols="30"></textarea>
</form>

7. 선택입력 (드롭다운 리스트) : select

<option value="값1">표시할항목1</option>

<option value="값2">표시할항목2</option>

</select>

형식을 form 안에 넣으면 된다.

만약 표시될 항목의 개수를 조정하고 싶다면 size="n" 속성을 사용할 수 있다.

<form>
    <select name="subject">
    <option value="C">C언어</option>
    <option value="JAVA">JAVA</option>
    <option value="HTML" selected>HTML</option>
    <option value="CSS">CSS</option>
</select>
</form>


<form>
    <select name="subject" size="3">
    <option value="C">C언어</option>
    <option value="JAVA">JAVA</option>
    <option value="HTML" selected>HTML</option>
    <option value="CSS">CSS</option>
    </select>
</form>

이때 selected 속성을 사용해 초기에 선택되어 표시될 항목을 지정할 수 있다.

8. 버튼

type = "button"을 눌러 사용자가 누를 수 있는 버튼을 생성한다.

<form>

</form>

형식을 가지며 별다른 기능을 수행할 수는 없다.

<form>
    <input type="button" name="btn" value="버튼">
</form>

결과화면

CSS로 버튼의 색상, 크기, 모양 등을 커스터마이징 할 수 있다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

9. 전송 버튼

type="submit"으로 submit type의 전송버튼을 생성할 수 있다.

<form>

</form>

<form>
    <input type="submit" name="btn" value="전송">
</form>

마찬가지로 별다른 작업을 해놓지 않으면 그저 클릭할 수 있는 버튼에 불과하다.

아래와 같은 방식으로 버튼을 통해 데이터를 전송할 수 있다.

<form action="#" method="post">
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Send">
  </div>
</form>

10. 시간 : time

input type="time"으로 시간 데이터를 입력받을 수 있다.

<form>Choose a time for your meeting:
    <br>
    <input type="time" id="appt" name="appt" min="09:00" max="18:00" required>
    <br>
    <small>Office hours are 9am to 6pm</small>
</form>

'개발 > 웹개발' 카테고리의 다른 글

[CSS] 선택자 응용 20가지 : 여러 가지 요소, 요소 내부의 요소 등등 . . (0)	2022.09.05
[CSS] 선택자란?, 선택자가 적용되는 우선순위(Selectors) (0)	2022.09.03
[CSS] CSS란?, CSS3를 HTML5에 적용하기 (0)	2022.08.31
[HTML] 항목, 리스트 만들기 : <ul>, <li>, <ol> (0)	2022.08.28
[HTML] HTML 기본구조, 기본태그 (0)	2022.08.26

현재글[HTML] HTML 데이터 입력받기 / 버튼, 체크박스 생성하기 : <form>, <input>

SUBORATORY