일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- EC2 zsh
- Logback
- javascript scope
- Linux oh my zsh
- Linux 디렉터리 명령어
- javascript 정렬
- 서버의 서비스 방식
- UNPROTECTED PRIVATE KEY FILE
- Navigation Pattern
- ec2 ssh unprotected private key file
- EC2 Apache2
- linux foreground
- HTTP Web Server
- Linux pwd
- Linux ls
- linux background
- Linux apt-get
- Linux mkdir
- AWS EC2 서버 만들기
- Linux rmdir
- arbitrum sepolia eth
- Linux 파일 관리 명령어
- Linux 디렉터리 구조
- EC2 oh my zsh
- Linux apt
- EC2 HTTP 호스팅
- Linux 디렉터리 역할
- Linux cd
- Linux cat
- 아비트럼 새폴리아 이더 받는법
- Today
- Total
HyunJun 기술 블로그
Web 2.0과 HTML <form>, <label>, <input>, <textarea> Element 본문
1. World Wide Web 2.0
Web 1.0은 read only였습니다. Web 2.0은 Read와 Write가 가능하고 사용자의 Data를 활용하는 Web을 의미합니다. 즉 현시대에 사용 중인 거의 모든 서비스(웹 서비스)를 의미합니다.
- 사용자와 서비스 제공자의 데이터 입력에 의한 상호작용을 위해 form, label, input, textarea가 존재합니다.
- 즉, HTML에서 데이터의 입력(input)에 사용되는 요소들이며, form, label, input, textarea이 거의 한 세트라고 봐도 무방합니다.
- 기존 서비스에서는 로그인, 회원가입 등에서 사용됩니다.
2. <form>
form 요소는 로그인, 회원가입, 설문, 데이터 등을 서버로 전송하기 위해 사용되는 요소입니다.
method는 중요한 정보일 경우 post로 보내고 간단한 내용의 경우 get으로 보내도 무방합니다.
<form action="myserver" method="post">label, input, textarea form</form>
아래의 결과를 보다시피, form 요소는 혼자서는 동작하지 못합니다.
2-1. <input>은 데이터를 입력하기 위한 요소
- type 속성으로 입력받을 데이터가 어떤 타입인지를 설정할 수 있습니다.
- placeholder 속성으로, 값이 입력되지 않았을 시에 설명 용도로 보일 텍스트를 지정할 수 있습니다.
- 기본적으로 <input>은 Inline 요소이므로 깔끔하게 보기 위해 스타일을 block 요소로 변경하였습니다.
- 이러한 input 요소들은 form 태그의 자식 요소로서 존재할 때, form을 전송 시 해당 데이터들로 전송됩니다.
- name 속성은 해당 폼에서의 이름을 명시합니다.
- 서버로 제출된 폼 데이터에서 이름을 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용됩니다.
<head>
<style>
input {
display: block;
}
</style>
</head>
<body>
<form action="" method="post">
<input type="text" name="form-text" placeholder="텍스트 입력" value="기본값" />
<input type="number" name="form-number" placeholder="숫자 입력" />
<input type="email" name="form-email" placeholder="이메일 입력" />
<input type="color" name="form-color" />
<input type="checkbox" name="form-checkbox" value="체크 박스" />
<input type="date" name="form-date" />
<input type="image" src="./submit.png" alt="제출 버튼" style="width: 150px" />
<button>제출하기</button>
</form>
</body>
기본적으로 form 태그의 자식 요소로서 button이 존재한다면 해당 버튼은 form을 submit(제출) 하는 용도로 쓰이게 되며, image 타입의 input 요소는 이미지가 있는 submit 버튼으로 쓰이게 됩니다. 기본적으로 위와 같이 작성 시 action에 설정한 서버 url로 method (get, post)에 맞추어서 전송이 되지만, 현재 서버가 없는 관계로 JavaScript에서 form data를 확인해 보겠습니다.
간단하게 </body> 태그 위에 확인용 js 코드를 추가해 보았습니다. form 태그 요소를 가지고 와서, submit이라는 이벤트가 발생할 때 새로고침을 막고, event.target에서 폼데이터를 가지고 와서 새로운 폼데이터를 생성하고 데이터를 콘솔로 찍어보겠습니다.
<script>
const myForm = document.querySelector("form");
myForm.addEventListener("submit", (event) => {
// submit 행동을 막아줍니다. 즉, 페이지 이동을 아래의 메서드로 막아줄 수 있습니다.
event.preventDefault();
const data = new FormData(event.target);
console.log([...data.entries()]);
});
</script>
</body>
이메일 같은 경우 형식에 맞지 않으면 form 전송 시 브라우저에서 자체적으로 막아줍니다.
아래와 같이 작성 후, SUBMIT 아이콘과, 제출하기를 각각 눌러 보았습니다.
2-2. <label>은 input을 설명하기 위한 요소
input 요소를 설명하기 위해 쓰이며, 해당 label을 클릭 시 input 창으로 이동합니다. input의 id와 for을 연결해야 합니다.
<label for="text">텍스트!</label>
<input style="display: inline" id="text" type="text" name="form-text" placeholder="텍스트 입력" value="기본값" />
굳이 id와 for을 연결하지 않아도 아래처럼 input 요소를 label 안에 넣으면 위의 움짤과 동일하게 동작합니다.
<label>텍스트!
<input style="display: inline" type="text" name="form-text" placeholder="텍스트 입력" value="기본값" />
</label>
2-3. <textarea>는 많은 양의 텍스트를 편하게 입력하기 위한 요소
text type인 input 요소에서는 엔터(개행)를 사용할 수 없지만 textarea에서는 사용할 수 있습니다. 장문의 글이 필요한 게시판 같은 곳이나, 개행이 포함된 텍스트를 구현하려면 사용하면 됩니다. 기존의 코드에 textarea만 추가했습니다.
<form action="" method="post">
.
.
.
<textarea name="form-textarea" cols="30" rows="10" placeholder="글을 작성하세요."></textarea>
.
.
</form>
폼 제출 시, 개행을 포함한 문자열 데이터를 확인할 수 있습니다.