HTML입력양식태그&구조화 태그

Dinnnnn·2022년 8월 12일
0

HTML

목록 보기
3/5
post-thumbnail

입력양식이란

  • 사용자에게 정보를 입력 받는 요소
  • form태그로 영역을 생성 후 내부에 input태그를 넣어 만듬
  • form태그는 method속성의 방식으로 action속성 장소에 데이터를 전달
<form action="전송위치" method="전송방식">
//전송방식
GET:주소에 데이터를 직접 입력해 전달
POST:별도의 방법을 사용해 데이터를 해당 주소로 전달
  	(비밀스럽게 전달/주소가 변경되지 X)

입력양식 종류

태그속성설명
form보이지 않음입력 양식의 시작과 끝 표시
text글자입력 양식 생성
button버튼 생성
checkbox체크 박스 생성
hidden해당 내용 표시 안함
inputimage이미지 형태 생성
password비밀번호 입력 양식 생성
radio라디오 버튼 생성
reset초기화 버튼 생성
submit제출 버튼 생성
textareacols/rows여러 행의 글자 입력 양식 생성/colos는 너비를 지정하고 rows는 높이를 지정
select선텍양식 생성
optgroup옵션 그룹화
option옵션 생성
fieldset입력 양식의 그룹 지정
legend입력 양식 그룹의 이름 지정
  • input태그에 type속성을 지정해서 다양한 종류의 기본 입력양식을 생성
<!DOCTYPE html>
<html>
<head>
   
    <title>Document</title>
</head>
<body>
    <form>
        <input type="text" name="text" value="text"><br>
        <input type="password" name="password" value="password"><br>
        <input type="file" name="file" value="faile"><br>
        <input type="checkbox" name=""checkbox value="che0ckbox"><br>
        <input type="radio" name="radio" value="radio"><br>

        <input type="hidden" name="hidden" value="hidden">

        <input type="button" value="button"><br>
        <input type="reset"  value="reset"><br>
        <input type="submit" value="submit"><br>
    </form>
</body>
</html>

label태그

<!DOCTYPE html>
<html>
<head>
   <title>Document</title>
</head>
<body>
    <form>
        <table>
            <tr>
                <td><label for="username">이름</label></td>
                <td><input id="username" type="text" name="username"></td>
            </tr>
            <td>성별</td>
            <td>
                <input id="man" type="radio" name="gender" value="m">
                <label for="man">남자</label>
                <input id="woman" type="radio" name="gender" value="w">
                <label for="woman">여자</label>
            </td>
        </table>
        //제출버튼에 제출이라는 이름 대신 무엇을 할건지 결정
        <input type="submit" value="가입">
    </form>
</body>
</html>

  • 연관있는 입력 양식 그룹으로 묶기
    • field태그&legend태그
<!DOCTYPE html>
<html>
<head>
   <title>Document</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>입력양식</legend>
            <table>
                <tr>
                    <td><label for="name">이름</label></td>
                    <td><input id="name" type="text"></td>
                </tr>
                <tr>
                    <td><label for="mail">이메일</label></td>
                    <td><input id="mail" type="email"></td>
                </tr>
            </table>
            <input type="submit">
        </fieldset>
    </form>
</body>
</html>


select태그

  • 한 항목만 선택
<!DOCTYPE html>
<html>
<head>
   <title>Document</title>
</head>
<body>
    <select>
        <option></option>
        <option>여름</option>
        <option>가을</option>
        <option>겨울</option>
    </select>
</body>
</html>

  • 여러항목 선택
<!DOCTYPE html>
<html>
<head>
   <title>Document</title>
</head>
<body>
    <select multiple="multiple">
        <option></option>
        <option>여름</option>
        <option>가을</option>
        <option>겨울</option>
    </select>
</body>
</html>

  • 선택옵션 묶기
<!DOCTYPE html>
<html>
<head>
   <title>Document</title>
</head>
<body>
    <select>
     <optgroup label="계절">
        <option></option>
        <option>여름</option>
        <option>가을</option>
        <option>겨울</option>
     </optgroup>
     <optgroup label="과일">
        <option>딸기</option>
        <option>복숭아</option>
        <option>사과</option>
     </optgroup>
    </select>
</body>
</html>


공간분할 태그

  • 공간 분할을 해야 CSS로 원하는 레이아웃을 구성한다
    또 자주 사용하는 태그이기도 하다
태그설명
div블록 형식으로 공간 분할
span인라인 형식으로 공간 분할

블록 형식 태그인라인 형식 태그
div태그span태그
h1~h6태그a태그
p태그input태그
목록태그글자 형식 태그
테이블 태그입력 양식 태그

시멘틱(semantic)태그

  • 시멘틱은 의미론적인이라는 의미를 가지고 있다 시멘틱 웹은 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형웹을 의미한다
태그설명
header머리말(페이지 제목,페이지 소개)
nav하이퍼링크들을 모아 둔 네비게이션
aside본문 흐름에 벗어나는 노트나 팁
section문서의 장이나 절에 해당하는 내용
article본문과 독립적인 콘텐츠 영억
footer꼬리말(저자나 저작권 정보)
- 시멘틱 태그를 이용한 레이아웃 구성
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <header>
        <h1>HTML5 기본</h1>
    </header>
    <nav>
        <li><a href="#">메뉴-1</a></li>
        <li><a href="#">메뉴-2</a></li>
        <li><a href="#">메뉴-3</a></li>
    </nav>
    <section>
        <article>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
        </article>
        <article>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
        </article>
    </section>
    <footer>
        <address>서울특별시 강서구 마곡동</address>
    </footer>
</body>
</html>

Plus+

  • value 가 하는 일 알아보기

0개의 댓글