[HTML] input 태그 (submit, button, hidden type)

이번 글에서는 HTML 언어 중에서 form 태그와 함께 쓰이는 태그인 input 태그의 타입들 중 submit, button, hidden type에 대하여 다루도록 하겠습니다.

 

# form 태그

 

  아래 사진에 보이는 편집기와 웹페이지가 이번 글에서 input 태그에 대하여 설명해드릴 웹페이지입니다. input에는 여러가지 type이 존재합니다. text 타입과 같이 방문자가 어떠한 행동을 할 수 있도록 하여 방문자와 상호작용하는 타입들도 있고, submit, button, hidden 태그와 같이 페이지와 연결된 서버로 어떠한 정보를 어떻게 전달할 것인지를 결정하는 타입들도 있습니다.

 

html 사진1

위 사진의 1번 영역안에 이번 글에서 사용하는 3가지 타입의 input 태그들을 넣도록 하겠습니다.

<form action="index.html">

</form>

 

# input type = " submit "

(1) input type = "text"를 작성하여 사용자가 정보를 입력할 수 있는 박스를 표시합니다.

• 사용자가 어떠한 정보를 서버로 보낼 때에 서버에게 보내질 정보의 이름과 값을 할당하셔야 합니다.

 

(2) input type = " submit " 를 작성하여 사용자가 서버로 정보를 제출할 수 있도록 합니다.

<form action="index.html">
<input type="text" name="want to know" value="question">
<input type="submit">
</form>

html 사진 2

 

# input type = " button "

 

(1) 먼저, button 타입의 경우에는 HTML 언어만을 사용할 때에는 어떠한 쓰임새도 없습니다. HTML과 Java Script를 같이 사용할 때에만 그 쓰임새가 있습니다. 이 글에서는 이러한 input type이 있다. 는 것 정도와 함께 사용 방법만을 다루겠습니다.

 

(2) input type = "button" 을 입력하고, name과 value를 지정합니다. 여기서 value는 오른쪽 3번 박스에 표시된것처럼 실제로 화면에 표시되는 텍스트입니다.

 

<form action="index.html">
<input type="text" name="want to know" value="question">
<input type="submit">
<br>
<input type="button" name="button type" value="x">
</form>

html 사진 3

 

# input tyoe = " hidden "

 

(1)  특이하게도, hidden 태그는 페이지 방문자와 상호작용하기 위한 태그는 아닙니다. 이 hidden 태그는 방문자에게 보이지 않으며, 방문자가 조작하지도 않습니다. 그저, 페이지 내부에 삽입되어 submit 이나 button과 같은 개체를 통하여 서버로 정보가 넘어갈 때에 항상 같이 넘어가게 만들 정보를 기입하는 것입니다.

 

(2) input type = " hidden " 이 타입명이며 사용방법은 submit 타입과 동일합니다.

 

<form action="index.html">
<input type="text" name="want to know" value="question">
<input type="submit">
<br>
<input type="button" name="button type" value="x">
<input type="hidden" name="hide" value="o">
</form>

html 사진 4

 

 

여기까지 HTML 언어 중에서 form 태그와 함께 쓰이는 태그인 input 태그의 타입들 중 submit, button, hidden type에 대하여 다루었습니다.

 

 

 

# 본문과 관련된 다른 글

[HTML] 웹페이지 제작의 기본 form 태그

 https://stockbroker.tistory.com/entry/HTML-웹페이지-제작-기본-form-태그

[HTML] 웹페이지 제작의 기본 form 태그

[HTML] input 태그 radio 타입, checkbox 타입 사용방법

https://stockanthouse.tistory.com/entry/HTML-input-태그-radio-타입-checkbox-타입

[HTML] input 태그 radio 타입, checkbox 타입 사용방법