폼이란, html에서 입출력을 담당하는 dom요소를 통합해서 말하는것으로,
css와 함께 사용하여 입출력 양식을 크게 바꿀 수 있습니다.
모든 입력을 담당하는 input 태그
input 태그는 다양한 양식에 맞춰 입력을 할 수 있는 기능부터,
type 속성을 이용해 체크박스나, 라디오박스, 버튼 등 다양하게 활용할 수 있는 태그입니다.
input 태그에서 자주 쓰이는 속성
- name
input 데이터를 식별하기 위한 키값을 설정하는데 사용합니다.
name 속성이 없는 데이터는 전송되지 않습니다. - value
태그의 값을 지정할 때 사용합니다. - placeholder
입력값이 없을 때 나타내는 가이드입니다. - type
input 태그의 타입을 지정하는 데 사용합니다.
text, password 등의 문자열 입력,
number, range 등의 숫자 입력,
date 와 같은 날짜 입력과 같이
특정 형식의 값을 입력할 수 있는 타입부터
button, radio, checkbox 와 같은 ui 타입까지 지정할 수 있습니다. - 그 외 type 에 따른 추가 입력속성
image 타입의 경우 src와 alt,
radio나 checkbox의 경우 checked 등
type 속성값에 따라 필요한 추가 입력 속성이 존재합니다.
예시 코드
<div>텍스트<div>
<input type="text" placeholder="문자열을 입력하세요"/>
<div>패스워드</div>
<input type="password" placeholder="문자열을 입력하세요"/>
<div>체크박스</div>
<input type="checkbox"/>
<div>라디오박스</div>
<input type="radio"/>
<div>날짜</div>
<input type="date"/>
<div>숫자</div>
<input type="number"/>
실행결과
input에 대해 추가적인 내용을 알고 싶으면 아래 공식문서를 참고하시면 좋습니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
<input>: The HTML Input element - HTML: HyperText Markup Language | MDN
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element
developer.mozilla.org
button 태그와 form의 데이터전달
button 태그는 말 그대로 버튼을 만드는 태그입니다.
이 태그는 원래 단순히 버튼을 만드는 태그이지만, form 태그 내에서는 좀 달라집니다.
form의 데이터를 특정 url에 전송해주고, 이동하는 기능을 갖게 되지요.
input태그로도 구현이 가능한데, input 태그에서는 type="submit"을 사용하여 구현합니다.
만약, form 태그 내에서 제출기능이 없는 버튼을 만들고 싶다면,
input 태그에 type="button"을 적용해서 만듭니다.
예시코드
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<form method="get" action="./subindex.html">
<input type="text" name="text" />
<input type="text" name="text2" />
<input type="submit" value="next" />
</form>
</div>
</body>
</html>index.html은 데이터를 보내는 파일입니다.
form 태그의 method는 데이터 전송 방식을 나타내며, get 과 post가 존재합니다.
get은 url에 데이터를 포함하여 전송하고,
post는 파일의 형태로 전송합니다.
이때, get 형식은 입력 데이터가 모두 url에 보이기 때문에
비밀번호나 주민번호같은 중요 정보들은 get 형식으로 전송하면 안됩니다. (중요!)
따라서 get의 경우 검색이나, 페이지 정보를 확인할때 사용하며
회원가입, 정보수정 등의 데이터는 육안으로 확인할수 없는 post 방식으로 전송하게 됩니다.
일단 여기서 첫번째 input에 hello, 두번째 input에 world를 입력하겠습니다.
2. subindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
const url = new URL(window.location.href);
const urlParams = url.searchParams;
console.log(urlParams.get("text"));
console.log(urlParams.get("text2"));
</script>
</head>
<body>
<h1>subForm</h1>
</body>
</html>subindex.html은 데이터를 받는 파일입니다.
이전의 데이터를 get형식으로 받았기 때문에, form의 데이터는 url에 포함되어 있습니다.
따라서 javascript를 활용하여 데이터를 확인해보겠습니다.
다른 설정을 안했다면, url은 보통 http://127.0.0.1:5500/subindex.html?text=hello&text2=world 으로 되어있을것입니다.
여기서 봐야될것은 ?text=hello&text2=world 이부분입니다.
쿼리 문자열 (Query String)이라고 하며, form 에서 가져온 데이터를 url에 문자열 형식으로 붙였습니다.
?로 시작하며, key-value로 구성되어있고, 앰퍼센트(&) 로 각각 구분합니다.
index.html에서 input의 name값이 key 값이고, 입력된 값이 value가 됩니다.
따라서 text = hello, text2 = world 라는 2개의 파라미터를 받게 됩니다.
window.location.href 는 현재 url을 나타냅니다.
url에 현재 url을 값으로 가지는 URL 객체를 생성합니다.
그 뒤, searchParams 를 사용하여 url의 파라미터 묶음을 받아옵니다.
받아온 파라미터들에서 원하는 key값을 지정해서 받아올 수 있습니다.
현재는 form 내에서 사용되는 태그들을 알아보는 중이므로
submit을 수행할 경우 어떻게 넘어가는지만 확인하고, 이후에 다시 알아보도록 하겠습니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| 화면 구성하기 : 폼(form) - 라벨(label) (0) | 2024.11.07 |
|---|---|
| 화면구성하기 : 폼(form) - checkbox와 radio group (0) | 2024.11.05 |
| 화면 구성하기 - 박스모델의 구조 (0) | 2024.10.21 |
| 화면 구성하기 - grid 의 정렬 : content와 items (0) | 2024.10.18 |
| 화면구성하기 - grid template : rows,columns,areas (0) | 2024.10.16 |
