박코딩

박코딩

공부기록 블로그

주요 태그_3

1 minute read

주요 태그 3

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



입력

로그인 창 같이 정보를 입력받을 수 있는 공간을 만든다.

<input>
입력 필드를 생성하는 태그이다.

<html>
<body>
  <p>아이디 : <input type="text" name="id" value="default value"></p>
  <p>비밀번호 : <input type="password" name="pwd" value="default value"></p>
  <p>주소 : <input type="text" name="address" value="default value"></p>
</body>
</html>

아이디 :

비밀번호 :

주소 :

  • type

    입력받을 값의 타입을 지정하는 속성으로 text는 문자를 입력할 수 있다.

    비밀번호와 같은 경우 타입을 password로 지정해서 화면에 표시되지 않도록 할 수 있다.

  • value

    기본으로 입력 필드에 들어가 있는 값을 만들어준다.

  • name

    입력 받은 필드에 이름을 지정해 구분한다.

<textarea>

여러줄을 입력 받을 수 있는 공간을 만든다.

textarea1 : <textarea></textarea>

textarea2 : <textarea cols="5" rows="2"></textarea>

textarea1 :

textarea2 :

열고 닫는 textarea 태그로 공간을 만들 수 있다. 속성 중에 cols로 입력받을 글자 수, row로 줄 수를 정할 수 있다.

기본 값은 여닫는 태그의 사이 컨텐츠 공간에 작성할 수 있다.


선택

dropdown list

<html>
  <head>
  </head>
  <body>
    <strong>색상</strong>
    <select name="color">
      <option>붉은색</option>
      <option>검은색</option>
      <option>파란색</option>
    <select>
  </body>
</html>

색상

콤보박스 또는 드롭다운박스라고 부르는 선택 창이 만들어 진다.

  • <option> ~ </option>

    컨텐츠 내용으로 선택지를 만든다.

    value 속성으로 대상의 값을 따로 정할 수 있다. 실제로 페이지 상에서 보이는 값과 컴퓨터가 읽는 값을 다르게 관리할 수 있다.

  • <select> ~ </select>

    option을 묶어서 드롭다운리스트로 만든다.

    name 속성으로 선택한 값이 무엇인지를 식별할 수 있다.

다중 선택1

<html>
  <head>
  </head>
  <body>
    <strong>색상</strong>
    <select name="color" multiple>
      <option>붉은색</option>
      <option>검은색</option>
      <option>파란색</option>
    <select>
  </body>
</html>

색상2

이 리스트는 ctrl키를 누르고 클릭하면 다중 선택이 가능하다. 하지만 적절한 방법으로 보이지 않는다.


다중 선택2

일반적으로 다중 선택을 필요로 하는 경우 체크 박스를 사용하게 된다.

<html>
  <head>
  </head>
  <body>
    <input type="checkbox" name="color" value="red">붉은색
    <input type="checkbox" name="color" value="black">검은색
    <input type="checkbox" name="color" value="blue">파란색
  </body>
</html>

붉은색
검은색
파란색

체크박스를 클릭하여 선택을 할 수 있다.

You may also enjoy