주요 태그_4

less than 1 minute read

주요 태그 4

오랫동안 사용돼온 태그나 사용빈도가 높은 태그들을 정리한다.

클릭과 상호작용을 할 수 있는 버튼을 만든다. 버튼은 주로 입력 받은 값을 서버로 전송하는 기능을 하는데 이 때 form 태그와 함께 사용되어진다.

from

입력한 값을 서버로 전송하는 태그다.

<form action="http://localhost/form.php">

action 속성으로 전송 받을 서버의 주소를 받는다.

submit

<html>
<head>
<body>
  <form action="http://localhost/form.php">
    <input type="submit">
  </form>
</body>
</head>
</html>

제출이라는 버튼이 생긴다. 이 버튼은 기본적으로 입력 받은 값을 서버에 전송하는데 사용된다.

따라서 별다른 추가 설정없이 form 태그로 경로를 정하면 버튼을 누를시 그 주소와 연결된다.

<input type="submit" value="전송">  

value 값을 바꾸어주면 버튼 안의 텍스트를 바꿀 수 있다.

입력한 값을 초기화하는 버튼이다.

<html>
<head>
<body>
  <form>
    <input type="text">
    <input type="reset">
  </form>
</body>
</head>
<html>

필드에 입력하고 버튼을 누르면 지워진다.

type을 submit이 아닌 button으로 지정한 버튼

<html>
<head>
<body>
  <form action="http://localhost/form.php">
    <input type="button" value="버튼">
  </form>
</body>
</head>
</html>

type 속성을 button으로 지정해서 만든 버튼이다. 이 버튼은 form으로 동작하지 않고 직접 동작을 설정해서 사용해야 하기 때문에 순수 html만 사용할 때는 활용도가 떨어진다.

간단한 버튼 기능

<input type="button" value="버튼" onclick="alert('hello world')">

hello world 를 출력하는 알림창을 띄운다.