HTML / placeholder / 양식에 안내 문구 추가하기

value

input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다.

<!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>

Related Posts

HTML / select / 선택할 수 있는 목록을 만드는 태그

HTML / select / 선택할 수 있는 목록을 만드는 태그

select select는 선택할 수 있는 목록을 만들 때 사용합니다. 목록의 내용은 option 태그로 만듭니다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같습니다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰집니다. disabled : 화면에는 보이지만 사용할 수 없도록 만듭니다. multiple : 여러 값을 선택할 수 있도록 합니다. name : 이름을 붙입니다. size : 목록을 펼치기 전에 ...

HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단

HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단

제목 제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만듭니다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋습니다. 문단 문단(paragraph)은 p 태그로 만듭니다. 문단과 문단 사이는 간격이 큽니다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 예제 1 제목과 문단이 있는 간단한 문서입니다. 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 크기가 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading ...

HTML / abbr - 약자(abbreviation)임을 나타내는 태그

HTML / abbr - 약자(abbreviation)임을 나타내는 태그

abbr abbr은 약자(abbreviation)임을 나타냅니다. 문법 <abbr title="Xxx Yyy Zzz">XYZ</abbr> title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | abbr</title> </head> <body> <p> <abbr title="World ...

HTML / input / checkbox / 체크박스 만들기

HTML / input / checkbox / 체크박스 만들기

체크박스 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스입니다. 체크박스는 input 태그로 만듭니다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름입니다. value : 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Blue 또는 Red를 선택합니다. 둘 다 선택할 수 있습니다.(라디오 버튼은 하나만 선택할 수 있습니다.) 아무것도 선택되지 않은 상태에서 시작합니다. <!doctype html> <html lang="ko"> ...

HTML / address - 문서의 소유자, 작성자의 연락처를 나타내는 태그

HTML / address - 문서의 소유자, 작성자의 연락처를 나타내는 태그

address address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit ...

HTML / progress - 진행 정도 나타내는 바 만드는 태그

HTML / progress - 진행 정도 나타내는 바 만드는 태그

progress progress는 진행 정도 나타내는 바를 만드는 태그입니다. HTML5에서 추가되었습니다. IE는 버전 10부터 지원합니다. 주요 속성은 max, value입니다. max를 전체로 보았을 때 value에 해당하는 정도를 나타냅니다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다. 웹브라우저마다 표현 방식이 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <div> <progress value="20" max="100"></progress> </div> <div> <progress value="20" max="200"></progress> </div> </body> </html> 예제 ...

HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식

HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식

textarea textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. 문법 <textarea></textarea> 예제 col 속성(attribute)으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS에서 정하는 게 좋습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { ...

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

목록 목록에는 순서 있는 목록, 순서 없는 목록, 정의 목록 세가지가 있습니다. 순서 있는 목록 순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록입니다. 순서 있는 목록은 ol로, 목록의 내용은 li로 만듭니다. ​​​​<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> ...

HTML / pre / 입력한 그대로 출력하는 태그

HTML / pre / 입력한 그대로 출력하는 태그

pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식합니다. 예를 들어 다음 문서의 내용은 한 줄로 나옵니다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. ...

HTML / caption / 표(table)에 캡션 붙이는 태그

HTML / caption / 표(table)에 캡션 붙이는 태그

caption 표(table)에 캡션 붙일 때 caption 태그를 사용합니다. 기본 위치는 표 위 가운데입니다. 캡션 위치는 CSS의 caption-side로 정합니다. 예제 캡션의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> table { width: 100%; } th, td { border: 1px solid #dadada; } </style> </head> <body> <table> <caption>Table Caption</caption> <tr> <th>Lorem</th><th>Ipsum</th> </tr> <tr> <td>Dolor</td><td>Amet</td> </tr> </table> </body> </html>