폼에서 사용하는 여러 가지 태그

Hush 2022. 5. 30. 19:42

textarea : 여러 줄을 입력하는 텍스트 영역

여러 줄을 입력하는 텍스트 영역을 만듭니다.

게시판에서 글을 입력하거나, 약관 등을 표시할 때 자주 사용합니다

<textarea>내용</textarea>

cols와 rows 속성을 이용하여 텍스트 영역의 크기를 지정할 수 있습니다. cols는 문자 단위이고 rows는 줄 단위입니다. 지정한 rows수보다 텍스트가 길어지면 자동으로 스크롤 막대가 생깁니다

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
       <h1>회원 가입을 환영합니다</h1>
       <form action="">
           <label for="">메모<textarea name="" id="" cols="40" rows="10"></textarea></label>
       </form>
    </body>
</html>

select, option : 드롭다운 목록

사용자가 내용을 직접 입력하는게 아니라 여러 옵션 중에서 선택하게 하려면 드롭다운 목록을 사용할 수 있다.

select태그와 option태그를 이용해 표시한다.

select태그로 드롭다운 목록의 시작과 끝을 표시하고,

option태그를 사용해 그 안에 원하는 항목을 추가한다.

option태그에는 value속성을 이용해 서버로 넘겨주는 값을 지정한다.

<select name="" id="">
   <option value="val1">option1</option>
   <option value="val2">option2</option>
   ...
</select>

select태그에 size속성을 활용해 화면에 표시할 드롭다운 항목의 개수를 지정할 수 있으며

multiple 속성을 활용해 드롭다운 목록에서 둘 이상의 항목을 선택하도록 할 수 있다

option 태그에는 selected 속성을 활용해 기본적으로 선택해서 보여 줄 항목을 지정할 수 있다.

datalist, option : 데이터 목록

데이터 목록도 사용자가 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택하도록 할 수 있다.

데이터 목록을 만들 때에는 datalist태그를 이용해 데이터 목록의 시작과 끝을 표시하고

그 사이에 option태그를 사용해 각 데이터의 옵션을 표시한다.

이때 value속성을 사용해서 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타난다.

그리고 데이터 목록을 사용할 텍스트 필드에서 어떤 데이터 목록을 연결할지 id값을 지정하면 된다.

<input type="text" list="데이터 리스트 id">
<datalist id="데이터 리스트 id">
    <option value="서버로 넘길 값1">option1</option>
    <option value="서버로 넘길 값2">option2</option>
</datalist>

예제는 다음과 같다

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
       <h1>회원 가입을 환영합니다</h1>
       <form action="">
            <h3>대학교를 입력해 주십시오</h3>
            <input type="text" list="datalist1">
           <datalist id="datalist1">
                <option value="seoul UNIV.">서울대학교</option>
                <option value="korea UNIV.">고려대학교</option>
                <option value="yonsei UNIV.">연세대학교</option>
           </datalist>
       </form>
    </body>
</html>

드롭다운 리스트와 달리 데이터리스트를 활용하면 굳이 선택지 중에 고르지 않고 직접 텍스트박스에 타이핑 하는 것 또한 가능하다.

button : 버튼 만들기

button 태그를 활용하여 버튼을 만들 수 있다.

<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>

submit 타입은 <input type="submit">과,

reset 타입은 <input type="reset">과,

button 타입은 <input type="button">과 같은 기능을 한다.

button 태그는 폼 뿐만 아니라 버튼이 필요한 웹 문서의 어디든지 다양하게 활용할 수 있다.

button태그에는 콘텐츠를 포함할 수 있어서 아이콘을 추가하거나 CSS를 이용해 원하는 형태로 꾸밀 수도 있다.

저작자표시 (새창열림)