HTML form태그 - button, hidden field, label, method, upload

Develop My Life·2020년 5월 11일

TIL html

HTML

목록 보기

7/11

Button

Button의 종류

서버로 데이터를 전송하는 버튼
JavaScript를 활용하여 기능을 구현하는 버튼
같은 폼 태그 내의 입력 값을 초기화 해주는 버튼

서버로 데이터를 전송하는 버튼

<input type = "submit" value = "전송">
type을 submit으로 하면 서버로 데이터를 전송하는 버튼을 만들며 value값으로 버튼의 이름을 변경할 수 있다.

JavaScript를 활용하여 기능을 구현하는 버튼

<input type = "button" value = "버튼">

같은 폼 태그 내의 입력 값을 초기화 해주는 버튼

<input type="reset">

사용 예시

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form action="http://localhost/button.php">
    <input type="submit" value = "전송">
    <input type="button" value = "버튼" onclick="alert('hello world')">
    <input type="reset">
  </form>
</body>
</html>

hidden field

hidden field는 눈에 보이지 않지만 몰래 서버쪽으로 데이터를 전송해야할 때 사용한다.

예시

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form action="http://localhost/button.php">
    <input type="submit" value = "전송">
    <input type="hidden" name ="hide" value = "password">
  </form>
</body>
</html>

label

label은 무언가의 이름이라는 것을 명시하기 위한 태그이다. 정보의 명시성을 높여준다.

label을 하는 두가지 방법

label 속성 for와 input 속성 id 활용
lable 태그로 감싸기

예시

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form action="http://localhost/label.php">
    <label for="id">아이디 : </label>
    <input type="text" id = "id" name ="id">
    <label>
      비밀번호 :
      <input type="password" name="pwd">
    </label>
    <input type="submit">
  </form>
</body>
</html>

method

form 태그의 속성 중 하나.
서버로 정보를 보낼 때 보내는 방법을 설정할 수 있다.

method의 종류

get
url로 모든 정보를 보내는 방식이다.
아무것도 설정하지 않는다면 자동으로 method = "get"이 된다.
post
url로 모든 정보를 보내면 비밀번호같은 보호해야할 정보가 노출될 수 있다. 그렇기에 post 방식을 사용하여 서버에 정보를 보내는 것이 좋다.

method 사용 예시

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form action="http://localhost/label.php" method ="post">
    <label for="id">아이디 : </label>
    <input type="text" id = "id" name ="id">
    <label>
      비밀번호 :
      <input type="password" name="pwd">
    </label>
    <input type="submit">
  </form>
</body>
</html>

upload

파일을 서버에 업로드 시킬 수 있는 기능

파일을 보낼 때 규칙

method = "post"
enctype = "multipart/form-data"

upload 예시

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form action="http://localhost/upload.php" method ="post" enctype="multipart/form-data">
    <input type="file" name="profile">
    <input type="submit">
  </form>
</body>
</html>