HTML 기본 태그 및 속성

form

은 사용자가 입력한 데이터를 서버로 보내기 위한 태그이다.

쉽게 말하면 사용자가 입력하는 것들을 하나로 묶어서 보내는 역할을 한다.

<form>
    <input type="text">
    <input type="submit">
</form>

action

action은 form에 입력된 데이터를 어디로 보낼지 정하는 속성이다.

<form action="/login">
    <input type="text">
    <input type="submit">
</form>

여기서는 입력된 데이터를 /login으로 보낸다.

method

method는 데이터를 어떤 방식으로 보낼지 정하는 속성이다.

대표적으로

• GET : 데이터를 URL에 붙여서 보냄
• POST : 데이터를 요청의 body에 넣어서 보냄

<form action="/login" method="POST">
    <input type="text">
    <input type="submit">
</form>

로그인이나 회원가입처럼 데이터를 서버에 전달할 때는 보통 POST를 사용한다.

input

input은 사용자에게 데이터를 입력받는 태그이다.

<input type="text">

type에 따라서 입력받는 방식이 달라진다.

<input type="text">
<input type="password">
<input type="number">
<input type="email">
<input type="checkbox">
<input type="submit">

form 안에서 주로 사용하는 이유

input은 사용자의 입력을 받는 역할이고,

form은 그 입력값들을 하나로 묶어서 서버로 전송하는 역할을 하기 때문이다.

<form action="/login" method="POST">
    <input type="text">
    <input type="password">
    <input type="submit">
</form>

이렇게 하면 사용자가 입력한 값들을 form을 통해 한꺼번에 전송할 수 있다.

input 속성

type

어떤 종류의 데이터를 입력받을지 정한다.

<input type="text">
<input type="password">
<input type="number">

name

입력값에 이름을 붙인다.

서버로 데이터를 보낼 때 어떤 값인지 구분하기 위해 사용한다.

<input type="text" name="username">

사용자가 hello를 입력했다면

username=hello

와 같은 형태로 데이터를 구분할 수 있다.

value

input에 들어있는 값을 지정한다.

<input type="text" value="hello">

화면에 hello가 입력된 상태로 나타난다.

JavaScript에서 input의 값을 가져올 때도 자주 사용한다.

const value = input.value;
console.log(value);

placeholder

사용자가 입력하기 전에 보여주는 힌트이다.

<input type="text" placeholder="이름을 입력하세요">

입력하기 시작하면 placeholder는 사라진다.

value와 헷갈리지 않도록 주의하자.

<input type="text" value="hello">
<input type="text" placeholder="hello">

value는 실제 값이고
placeholder는 입력하기 전에 보여주는 안내문이다.

script

```html
<script src="script.js"></script>

그러면 script.js에 작성한 js를 HTML에서 사용할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <title>Momentum</title>
</head>
<body>

    <form>
        <input type="text" name="username" placeholder="이름">
        <input type="submit">
    </form>

    <script src="script.js"></script>
</body>
</html>

이렇게 HTML은 화면의 구조를 만들고,

HTML → 구조
CSS  → 디자인
JS   → 동작

js가 HTML의 요소를 가져와서 실제 동작을 추가한다.