양식에 안내 문구 추가하는 방법

1 value 속성 이용하기
2 placeholder 속성 이용하기
3 참고

value 속성 이용하기

input 태그에 value 속성을 추가해서 기본값을 만들 수 있습니다. 이 방법의 단점은, 수정하지 않고 버튼을 클릭했을 때 그 값이 전송된다는 것입니다.

placeholder 속성이 없었던 과거에 많이 사용했던 방법으로, 값이 아니라 안내문을 표시하고 싶다면 이 방식을 사용하지 않는 것이 좋습니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form>
      <p><input type="text" name="name" value="Name"></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

placeholder 속성 이용하기

무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder 속성을 사용합니다. 화면 상에는 그 문자열이 보이지만, 버튼을 클릭했을 때 아무 값도 전송되지 않습니다.

만약 필수 항목이라면 값을 입력하라는 메시지가 뜹니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form>
      <p><input type="text" name="name" placeholder="Input Name"></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

textarea에도 사용할 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form>
      <p><input type="text" name="name" placeholder="Input Name"></p>
      <textarea placeholder="Say something!"></textarea>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

참고

CSS의 ::placeholder 선택자로 placeholder를 꾸밀 수 있습니다.

HTML / Tutorial / 연속된 공백 넣는 방법

HTML에서 연속된 공백은 하나의 공백으로 처리합니다. 소스 코드에서 여러 칸을 띄어써도 브라우저에서는 한 칸을 띄어쓴 것으로 표현됩니다. 연속된 공백을 넣고 싶다면 특수 문자 를 사용합니다.

HTML / Tutorial / 목록

순서 있는 목록(Ordered List)은 차례대로 증가하는 번호가 붙는 목록입니다. 순서 없는 목록(Unordered List)은 번호 대신 점이나 사각형 등의 도형이 목록 앞에 붙습니다. 정의 목록(Definition List)은 용어와 그 뜻을 나열할 때 사용합니다.

HTML / Tutorial / 양식에 안내 문구 추가하는 방법

input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다. 만약 기본값이 아니라, 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를 사용합니다. 화면 상에는 그 문자열이 보이지만, 버튼을 클릭했을 때 아무 값도 전송되지 않습니다.

HTML / Tutorial / 제목과 문단

제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만듭니다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋습니다. 문단(paragraph)은 p 태그로 만듭니다. 문단과 문단 사이는 간격이 큽니다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.

HTML / Tutorial / 링크(link)

링크(link)는 a 태그로 만듭니다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있습니다. href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣습니다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리됩니다.

HTML / Tutorial / 표(table)

표는 table 태그로 만듭니다. 행은 tr 태그로 만듭니다. 열의 제목이 들어가는 셀은 th 태그로 만듭니다. 내용이 들어가는 셀은 td 태그로 만듭니다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있습니다.

HTML / Tutorial / 문법

HTML (HyperText Markup Language)은 웹 페이지를 구성하는 데 사용되는 마크업 언어입니다. 기본적인 HTML 문법과 구조는 다음과 같습니다.