<input> 태그
input 태그는 form 태그 내부에서 사용자의 입력값을 받아오기 위한 형식을 구현하는 태그이다.
예를 들어, 사용자가 키보드로 입력할 수 있는 텍스트 상자, 마우스로 클릭 할 수 있는 체크박스나 라디오버튼 등,
필요에 따라 원하는 양식으로 input 태그에 속성 값을 넣어서 사용하면 된다.
<input> 태그 사용법
input 태그는 여는 태그만으로 정보 제공이 가능하기 때문에 닫는 태그가 따로 필요없는 태그이다.
input 태그에서는 type 속성의 값으로 입력하는 양식의 모양이 바뀌게 된다.
(이 게시물에서는 간단한 기능을 가지고 있는 type 속성 값만 취급합니다. 자세히 다뤄야 하는 속성 값들은 따로 포스팅 하도록 하겠습니다.)
그리고 서버는 input으로 받은 값이 어떤 값인지 구분하지 못하기 때문에 name 속성을 이용하여 각 값이 어떤 정보인지 구분을 해야한다.
또한, value 속성으로 입력 값의 기본 값을 설정할 수 있다.
type = "text"
text.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="https://localhost/UserInfo.php">
<p>성함:<input type="text" value="클릭하세요" name="name"></p>
<p>거주지역:<input type="text" value="클릭하세요" name="residence"></p>
</form>
</body>
</html> (실행결과)
성함:
거주지역:
<p>성함:<input type="text" value="클릭하세요" name="name"></p>
<p>거주지역:<input type="text" value="클릭하세요" name="residence"></p> text는 위의 실행결과와 같이 작은 텍스트 상자를 만들어주는 역할을 한다.
코드를 보면 type의 값으로 text가 들어갔고, name의 값으로는 사용자가 입력할 값에 알맞게 지어져있다.
type = "password"
password.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="https://localhost/UserInfo.php">
<p>비밀번호:<input type="password" name="pw"></p>
</form>
</body>
</html> (실행결과)
비밀번호:
<p>비밀번호:<input type="password" name="pw"></p>password는 text와 똑같이 작은 텍스트 상자를 만들어 주는데 텍스트를 입력하게 되면, 입력한 문자가 "●" 으로 대체된다.
type="button"
button.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="버튼" onclick="alert('HTML')">
</body>
</html>
(실행결과)
<input type="button" value="버튼" onclick="alert('HTML')">button은 마우스로 클릭할 수 있는 버튼 하나를 만드는 것이다. 개별적으로 쓰기에는 쓸모가 없지만, javascript와 함께 사용하면 유용하게 활용할 수 있다.
value 값으로 버튼의 이름을 정할 수 있다.
type="submit"
submit.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="https://localhost/UserInfo.php">
<input type="submit" value="전송">
</form>
</body>
</html>
(실행결과)
<input type="submit" value="전송"> submit은 다른 type 값을 통해 사용자로부터 입력받은 값을 서버로 전송하는 역할을 한다.
전송되는 위치는 from 태그에 action 속성으로 경로를 지정한다.
value 속성으로 submit 버튼의 이름(기본 값: 제출)을 원하는 이름으로 바꿀 수 있다.
type = "reset"
reset.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="https://localhost/UserInfo.php">
<input type="reset">
</form>
</body>
</html>
(실행결과)
<input type="reset"> reset은 사용자가 input 태그 양식에 입력했던 모든 값을 다시 value 값으로 초기화 시켜주는 역할을 한다.
예를 들어, <input type="text" value="Click me"> 와 reset 버튼이 함께 사용된다면
사용자가 텍스트 박스에 아무거나 입력하고 초기화 버튼을 클릭하면 원래 기본 값인 Click me 로 바뀌게 된다.
만약 value 값이 없으면 공백으로 바뀐다.
type="radio"
radio.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="https://localhost/ChooseLanguage.php">
<p>
C<input type="radio" name="language" value="c">
Python<input type="radio" name="language" value="python" checked>
Java<input type="radio" name="language" value="java">
</p>
<p>
Window<input type="radio" name="os" value="Window" checked>
Mac<input type="radio" name="os" value="Mac">
</p>
</form>
</body>
</html>
(실행결과)
CPythonJava
WindowMac
<p>
C<input type="radio" name="language" value="c">
Python<input type="radio" name="language" value="python" checked>
Java<input type="radio" name="language" value="java">
</p>
<p>
Window<input type="radio" name="os" value="Window" checked>
Mac<input type="radio" name="os" value="Mac">
</p>radio 버튼 하나의 값만 마우스로 선택할때 사용한다. name속성의 값이 같은 radio 버튼은 동시 선택이 불가능하다.
value속성은 체크한 박스가 어떤 값을 가지고 있는지 알려주기 위해서 사용한다.
checked 속성을 이용해서 웹페이지를 열었을 때 기본값으로 미리 선택되어있게 하는 속성이다.
type="checkbox"
checkbox.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="https://localhost/ChooseLanguage.php">
<p>
HTML<input type="checkbox" name="webDevelopment" value="html" checked>
CSS<input type="checkbox" name="webDevelopment" value="css" checked>
Javascript<input type="checkbox" name="webDevelopment" value="javascript" checked>
</p>
</form>
</body>
</html>
(실행결과)
HTMLCSSJavascript
HTML<input type="checkbox" name="webDevelopment" value="html" checked>
CSS<input type="checkbox" name="webDevelopment" value="css" checked>
Javascript<input type="checkbox" name="webDevelopment" value="javascript" checked> checkbox 버튼은 여러개의 값을 선택할때 사용한다.
value속성은 체크한 박스가 어떤 값을 가지고 있는지 알려주기 위해서 사용한다.
마찬가지로 checked 속성은 웹페이지를 열었을 때 기본값으로 미리 선택되어있게 하는 속성이다.
'HTML_CSS > HTML' 카테고리의 다른 글
| 사용자의 입력 값을 받을 수 있는 또 다른 태그 <select> 태그 (0) | 2021.06.06 |
|---|---|
| 서버로 원하는 데이터를 보내기 위한 <form> 태그 (0) | 2021.06.01 |
| 표를 만들어주는 <table> 태그 (0) | 2021.05.31 |
| HTML 주석 기능 (0) | 2021.02.28 |
