[HTML] 하이퍼링크 관련 태그, 폼 관련 태그

하이퍼링크 관련 태그

• <a></a>
• 페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 태그
• 외부 사이트 연결, 문서 내부에서 이동 가능

 

<코드>

- 외부 사이트로 이동하기

<ul>
    <li><a href="https://www.naver.com" target="_self">네이버</a></li>
    <li><a href="https://www.google.com" target="_blank">구글</a></li>
</ul>

• href : 링크한 페이지의 id 값이나 사이트 주소 지정
• target : 링크 페이지가 표시될 위치(새창 또는 현재창) 지정
  • target="_blank" : 새 창
  • target="_self" : 현재 창
• download : 링크한 페이지를 표시하지 않고 다운로드 하는 것
• rel : 현재 페이지의 관계 지정
• type : 페이지의 파일 유형 지정

 

- 내부에서 이동하기

<ul>
    <li><a href="#content1">본문내용1</a></li>
    <li><a href="#content2">본문내용2</a></li>
    <li><a href="#content3">본문내용3</a></li>
</ul>
<h4 id="content1">본문내용1의 상세내용</h4>

• [본문내용1] 클릭 시 같은 id(content1)를 가지고 있는 [본문내용1의 상세내용]으로 이동

 

폼 관련 태그

• <form></form> : 사용자가 입력한 data를 보내는 방식과 처리 할 프로그램을 정하는 태그
• <fieldset></fieldset> : 폼 요소를 그룹으로 묶는 태그
•  <legend></legned> : 묶는 폼 요소에 명칭을 붙이는 태그
• <input> : 사용자로부터 data를 입력받기 위한 태그

 

<fieldset> 태그와 <legend> 태그

<코드>

<form>
    <fieldset>
        <legend>필드셋의 제목을 작성하는 부분이다.</legend>
        <label>입력 1 : </label><input type="text" value="사과"><br>
        <label>입력 2 : </label><input type="text"><br>
        <label>입력 3 : </label><input type="text"><br>
    </fieldset>
    <fieldset>
        <legend>필드셋으로 묶은 영역 별로 구분된다.</legend>
        <label>입력 1 : </label><input type="text" value="사과"><br>
        <label>입력 2 : </label><input type="text"><br>
        <label>입력 3 : </label><input type="text"><br>
    </fieldset>
</form>

• <form> 태그 안에 여러개의 <fieldset>이 존재할 수 있다.

 

<결과>

 

<input> 태그

<코드>

<form action="#" method="post">
	<h3>type="password"</h3>
	<p>비밀번호를 입력할 수 있는 텍스트 상자이다.</p>
	<label>비밀번호 : </label>
	<input type="password" name="userPwd" size="40" placeholder="비밀번호를 입력하세요">
</form>

- <form> 태그의 속성

• action : 데이터를 처리 할 프로그램(페이지)을 지정 (여기서는 데이터를 아무데도 보내지 않으므로 #으로 표시)
• method 
  • get : URL 창에 데이터를 보내는 방식, data 크기에 제한이 있음(256~4096byte)
  • post : http request에 data를 넣어 보내는 방식, data 크기에 제한이 없고 data를 볼 수 없음(회원 정보 같은 경우는 post형식으로 보냄)

- <input> 태그의 속성

• 사용자로부터 data를 입력 받기 위한 태그
• type : 입력창의 타입을 결정하는 속성(text, password, search 등)
  
  • 여기서는 type이 password이기 때문에 사용자의 입력 정보가 암호화되어서 화면에 표시됨
• value : input 요소의 기본 값 표시
• name : input을 구별할 수 있는 명칭
• size : 화면에서 표시하는 글자 수
• placeholder : 사용자 입력 전 입력 창 표시글(ex : "비밀번호를 입력하세요")

 

<결과>