HTML form 태그와 함께 사용자 입력 태그모음 알아보기

이번 시간에는 html로 쇼핑몰 주문서나 설문지를 만들수있는 form의 다양한 기능에 대해서 알아보겠습니다. 이 전에 html에 대해 알아야할 내용들은 몽땅 게시물 하단에 링크 걸어두었습니다. 자 그러면 들어가봅시다~

<form> 태그

사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 한다. 폼을 작성하는 태그다.

ex) <form action="register.php"> </form>

form의 속성들

method : 입력 받은 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 정함. get과 post가 있음

name : 자바스크립틀 폼을 제어할 때 사용할 폼의 이름을 지정

action : form 태그 내의 내용을 처리해 줄 서버 프로그램을 지정한다.

target : 액션 속성에서 지정한 파일을 현재 창이 아닌 다른 위치에서 연다.

 

autocomplete 속성

ex) <form action =" " autocomplete="off"> 

기본값은 on이고, off 해주려면 입력해야 한다.

 

form 내에서 구획을 나누는 태그 <fieldset>, <legend>

<fieldset>
<legend> 필드셋 이름 </legend>
</fieldset>

위의 내용을 출력해 보면 밑과 같은 결과가 나온다.

<input> 태그와 <label> 태그

사용자에게 입력값을 받을 때 input 태그를 쓰며, input 태그의 이름이 label이다. 마치 fieldset의 legend 같다고 생각하면 된다.

<input> 태그의 type 속성

text, number, password, url, range, reset, image 등등 입력할 수 있는 다양한 속성형식들이 있다.

위와 같은 속성형식들은 아래와 같이 사용한다.
<input type ="text">

 

text, password

search, url, email, tel

체크박스 속성과 라디오 속성 type = "checkbox" , type = "radio"

checkbox와 radio 속성에서 사용할 수 있는 속성
value와 checked

 

 

헷갈리는 점

Q. div와 fieldset의 차이점은 무엇일까?

A. div는 웹문서 내의 구획을 나타내기 위한 태그이며 기본적으로 아무 스타일이나 레이아웃을 갖지 않는다. CSS를 통해 추가해줘야 한다. fieldset은 form 태그 내부에서의 구획을 위한 것이며 시각적으로 구역을 나눈다.

 

Q. label과 id의 기능상 차이점은 무엇일까?

A. id는 말 그대로 html에서 서로 다른 요소를 구별하기 위한  identifier이다. CSS 및 Javascript에서 특정 요소를 선택하고 구분하는 데 사용된다. <div id="uniqueId"> 고유한 식별자를 가진 요소 </div>와 같은 예시를 들 수 있다. name은 form 태그 내에서 사용된다. <input type="text" name="username">과 같은 예시를 들 수 있다.

 

input의 type 중 <숫자 입력 필드>를 나타내는 number, range

type="number" 타입을 사용하게 되면 그냥 입력할 수 도 있지만 스핀박스라고 불리는, 숫자를 up화살표 down화살표를 이용하여 증감을 조절할 수 있는 기능이 추가된다.

여기 적용되는 속성은, min, max, step, value가 있다.
min - 필드의 최솟값을 지정한다. 기본 최솟값은 0이다.
max - 필드의 최댓값을 지정한다. 기본 최댓값은 100이다.
step - 숫자 간격을 지정할 수 있다. 기본은 1이다.
value - 필드에 표시할 초깃값이다.

input의 type 중 <날짜 입력>을 나타내는 date, month, week

date는 날짜, month는 월, week는 주를 달력에서 선택할 수 있다.

input의 type 중 <시간 입력>을 나타내는 time, datetime, datetime-local

time은 오전/오후, 시, 분을 선택할 수 있게 하고 datetime을 이용하면 사용자에 맞는 날짜와 시간을 입력할 수 있다.

날짜와 관련된 속성 또한 min, max, step, value가 있다.

input의 type 중 <전송, 리셋 버튼>을 나타내는 submit, reset

submit과 reset을 사용할 때 기본적인 형태는 다음과 같다.

<input type="submit" value="버튼에 표시할 내용">
<input type="reset" value="(취소하기)처럼 표시할 내용">

input의 type 중 <이미지 버튼>을 나타내는 image와 <기본버튼 > 기능의 button

button은 말 그대로 화면에 버튼을 출력하는 태그이며 image는 버튼의 기능을 하는 이미지를 화면에 표시하는 태그이다. 둘 모두 다음과 같이 사용된다.

<input type="button" value="버튼에 표시할 내용">
<input type="image" src="이미지 경로" alt="대체 텍스트">

input의 type 중 <파일 첨부>를 나타내는 file

<input type="file">과 같이 사용되며, 이 버튼을 사용하면 사용자가 첨부하고 싶은 파일을 첨부할 수 있게 된다.

 

input의 type 중 <히든필드 작성>에 사용되는 hidden

히든필드란, 화면에 보이지 않지만 사용자가 입력을 끝내면 서버로 전송되는 요소다.

<input type="hidden" name="이름" value="서버로 넘길 값">이 기본형태이다. 

 

1번 게시물 2023.12.29 - [data lab] - HTML 기본 기능 태그 알아보기

HTML 기본 기능 태그 알아보기

2번 게시물  2023.12.30 - [data lab] - HTML 기본 태그 모음 알아보기

HTML 기본 태그 모음 알아보기

3번 게시물  2024.01.04 - [data lab] - HTML form 태그와 함께 사용자 입력 태그모음 알아보기

HTML form 태그와 함께 사용자 입력 태그모음 알아보기