[HTML5] 웹 폼

Front-end

[HTML5] 웹 폼

나는나는용 2024. 7. 31. 10:58

728x90

웹 폼

웹 페이지에서 사용자 입력을 받는 폼

로그인, 등록, 검색, 예약, 쇼핑 등

요소

폼을 만드는 다양한 태그

<input>, <textarea>, <select> .......

+) <input>태그는 종료 태그가 없다.

작성

폼 태그( <form> )로 둘러싸는 형태, 컨테이너

name 속성

폼이름 지정

action 속성

폼 데이터를 처리할 웹 서버 응용프로그램의 이름 (보낼 url)

submit 버튼이 눌리면 브라우저는 action에 지정된 웹 서버 응용프로그램에 실행 요청

웹 서버 응용프로그램 - JAVA,, JSP, PHP, C, C++ 등 다양한 언어로 작성

method 속성

폼 데이터를 웹 서버로 전송하는 방식

대표적인 전송 방식 : GET(검색어까지 넘기는 전송 방식), POST(로그인과 게시판처럼, 검색어까지 넘어가지 않음)

종류

text, password, submit, textarea, reset의 사용빈도가 높다.

<input type="text"> : 한 줄 텍스트 입력 창
<input type = "password"> : 암호 입력을 위한 한 줄 텍스트 입력 창
<input type = "button"> : 단순 버튼
<input type = "submit"> : 웹 서버로 폼 데이터를 전송시키는 버튼
<input type = "reset"> : 입력된 폼 데이터를 초기화하는 버튼
<input type = "image"> : 이미지 버튼
<input type = "checkbox"> : 체크박스, 중복 가능
<input type = "radio"> : 라디오박스, 중복 불가
<input type = "month | week | date | time | datetime-local"> : 년, 월, 일, 시간 등의 정보 입력창
<input type = "number | rage"> : 스핀 버튼, 슬라이드바로 편리한 숫자 입력
<input type = "color"> : 색 입력을 쉽게 하는 컬러 다이얼로그
<input type = "email | url | tel | seart"> : 이메일, url, 전화번호, 검색 등 형식을 검사
<input type = "file"> : 로컬 컴퓨터에 파일을 선택하는 폼 요소
<button type = "button | reset | submit"> : 단순버튼, reset, submit 버튼 (input 방식이랑 똑같긴함)
<select> : 드롭다운 리스트를 가진 콤보박스
<textarea> : 여러줄의 텍스트 입력 창

텍스트 입력

<form>
<input type = "text"> : 한줄짜리 입력창
<input type = "password"> : 암호 입력창, 사용자가 입력한 문자 대신 *, · 와 같은 다른 글자로 출력(암호화)

<textarea> : 여러줄 입력 창

</form>

형식

<input type = "text | password" name = "요소이름(각 input type = "text"의 이름을 정확하게 구분해서 작성)" maxlength = "문자개수(입력할 수 있는 문자의 최대 개수)" size = "문자 개수(입력 창의 크기, size = "25" : 25자 크기의 사이즈로 생성해라)"

value = "초기텍스트(나올 때 출력할 텍스트)">

형식

데이터 목록을 가진 텍스트 입력 창 <datalist>

목록 리스트를 작성하는 태그. <option>태그로 하나의 항목을 표현

<input type = "text">에 입력 가능한 데이터 목록을 작성할 때 사용.

list 속성값과 datalist id값이 서로 같아야 한다.

나라 : <input type = "text" list = "countries">

</datalist>

텍스트 / 이미지 버튼

방식 1. <input type = "button | reset | submit | image" value = "버튼에 들어갈 문자열">

방식 2. <button type = "button | reset | submit">버튼에 들어갈 문자열</button>

체크박스, 라디오버튼

선택적 입력, 미리 선택할 내용을 주어지게 한다.

체크박스 : <input type = "checkbox"> : 여러개의 값을 체크하여 가질 수 있다.

라디오버튼 : <input type = "radio"> : 같은 name 그룹내에서, 여러개의 보기 중 하나의 값만 가질 수 있다.

<option> 태그

선택된 입력: 콤보박스 <select> 태그 드롭다운 리스트에 목록 출력, 목록을 선택하는 입력 방식

<option> 태그로 항목 하나 표현

여러개의 <option>............</option>태그로 항목 만들기

</select>

<label>로 폼 요소의 캡션 만들기

캡션이란?

캡션	폼요소
사용자ID :	<input type = "text">

<label> 태그로 캡션과 폼 요소를 한 단위로 묶음

캡션 텍스트를 명료하게 하는 관점

방법 1.

방법 2.

ex)

<html>
<head>
<title>로그인폼</title>
</head>

<body>
<h3>로그인폼</h3>
<hr>
<form name = "fo" method = "get">
	<label> 사용자 ID : <input type = "text" size = "15" value = ""></label><br>

	<label for="pass"> 비밀번호 : </label> 
		<input type = "password" id = "pass" size = "15" value = "">
		<input type = "submit" value = "완료">
</form>
</body>
</html>

HTML에서의 색 표현

방법 1. 색상 코드

#00 00 00 (R / G / B)

각각 256단계(0~255까지 표현)

16진수.(0~f, 16개의 숫자로 이루어진 숫자 시스템)

0이면 값이 없음. 255가 가장 진한 값.

방법 2. 색 명칭

brown == #A52A2A

blue == #8A2BE2

darkorange, deepskyblue, gold 등등

색 입력 폼

<input type = "color" value = "#00FF00(초기값 지정 가능)"> : 컬러 다이얼로그 출력, 사용자로부터 색 선택

시간 정보 입력 폼 요소

<input type = "month | week | date | time | datetime-local"> : 시간 정보만 입력 가능한 폼 요소

type 속성값	입력 데이터	value의 형식	예시
<input type = "month">	년/월	2024-07	<input type = "month" value = "2024-07">
<input type = "week">	년/몇번째주	2024-W25	<input type = "week" value = "2024-W25">
<input type = "date">	년/월/일	2024-07-29	<input type = "date" value = "2024-07-29">
<input type = "time">	해당 나라의 시간	2024-07-29T12:44:20.23	<input type = "time" value = "2024-07-29T12:44:20.23">
<input type = "datetime-local">	시/분	12:44	<input type = "datetime-local" value = "12:44">

스핀 버튼과 슬라이드로 편리한 숫자 입력

<input type = "number"> : 스핀 버튼으로 정교한 값 입력

<input type = "number" min = "0.0" max = "10.0" step = "0.5"> : spin버튼 클릭시 0.0~10.0 사이에서 0.5씩 증감

<input type = "range"> : 슬라이드바, 대략적인 값 입력

</datalist>

입력할 정보의 힌트 보여주기 : placeholder

사용자가 입력할 데이터에 힌트를 준다.

아래 예시들에서 볼 수 있듯이, 회색으로 뜨는 글씨들.

기존 HTML 한계

웹 문서 구조를 표현하는 태그가 없었다.

기존 태그 - <p><div><h1>등 : 문서의 구조나 의미 전달 어려움이 있었다.

그~~래~~서~~!

문서 구조화

문서 구조화를 해보자! 왜?

검색 엔진이 좋아하는 웹 페이지 작성의 필요성 대두
정보탐색이 중요해진 시대.
사물 인터넷으로 IT 장치들이 스스로 정보 탐색하는 시대
사용자가 만든 웹 페이지 가치 극대화 - 탐색이 쉽게끔

<div>태그나, <table> 태그로 구조화되어 보이게 작성.

시맨틱 웹

웹 문서를 구조화하여 의미있는 내용 탐색이 용이한 웹

시맨틱 태그

문서의 구조와 의미를 전달하는 태그.

CSS3를 이용하여 직접 위치와 색, 모양을 지정해줘야 한다.

지정하지 않으면 텍스트만 출력됨.

<header><section><article><main><summary><mark><time> 등등

구글의 검색엔진 사례

웹 페이지에서 시맨틱 태그 검색.

리뷰, 사람, 제품, 업체, 이벤트, 음악 등 검색결과 제공.

종류

<header>	페이지나 섹션의 머리말 표현. 페이지 제목, 페이지 소개 등 간단한 설명.
<nav>	하이퍼링크들을 모아놓은 특별한 섹션, 페이지 내 목차를 만드는 용도.
<section>	문서의 장(chapter, section) 혹은 절을 구성하는 역할. <h1~h6>를 사용한다. 일반 문서의 여러 장이 있듯이, 웹 페이지에 여러 <section>이 존재할 수 있다.
<article>	본문과 연관있지만, 독립적인 컨텐츠를 담는 영역. 보조기사, 블로그포스트, 댓글 등
<aside>	본문에서 약간 벗어난 노트나 팁. 신문, 잡지에서 주요 기사 옆의 관련 기사.
<footer>	꼬리말 영역, 주로 저자나 저작권 정보