본문 바로가기
HTML, CSS, JS

2022-09-21(1) html 양식태그 입력하여 서버로 전송

by HTT 2022. 9. 21.

6) 양식태그  (참고 : form.test.html)

- 사용자가 입력한 내용을 서버로 전송하기 위해 사용하는 태그(양식태그, 입력태그, 폼태그...)

- <form>     사이에 추가해서 사용     </form>

- < form action = "요청할 어플리케이션의 path" method = "요청방식" >  양식태그  </form>

   <form action="/clientweb/html/lounge.html" method="get">

   => <form> </form> 사이에 있는 양식태그에 입력한 모든 내용이 서버로(action속성에 명시한 어플리케이션을 호출하며) 전송된다.

   => action에 어플리케이션이 호출되는 방식

* get방식 : 서버의 데이터를 가져오기 위한 방식. 주소표시줄에 요청한 내용이 노출. 4000바이트정도 서버로 넘길 수 있다.

* post방식 : 사용자가 입력한 내용이 요청헤더의 바디에 추가되어 전송되므로 주소표시줄에 노출되지 않는다.

     

입력태그

1. 텍스트를 입력 받는 양식태그 (typr, name, value)

아이디:<input type="text" name="id" size="100" maxlength="10" value="bts" disabled="disabled"><br/>
패스워드:<input type="password" name="pass"><br/>
정보:<br/>
<textarea rows="5" cols="info">자기소개:</textarea>

  * value : 디폴트 값을 주고 시작하겠다는 것(read only).

 

2. 버튼관련 양식태그

<input type="reset" value="데이터지우기(취소)">

<input type="submit" value="서버로 전송하기">

 

3. 선택관련태그

<fieldset>
<legend>좋아하는 과목1</legend>
<input type="checkbox" name="subject1" value="자바">자바

  * checkbox : 중복 선택 가능

 

<input type="radio" name="subject2" value="자바">자바

  * radio : 중복선택 불가능 (단, subject2, subject3 처럼 name이 다르면 중복 선택 가능)

 

<select name="subject3">
<option value="자바">자바</option> </select>

  * 콤보상자

 

<select name="subject4" size="4" multiple="multiple">
<option value="자바">자바</option> </select>

  * 목록. multiple="multiple" => 중복 선택 가능

 

4. 기타 양식태그

검색:<input type="search">
전화번호:<input type="search">
수량1:<input type="search" min="10" max="20">
수량2:<input type="range" step="10">
날짜:<input type="date">
날짜:<input type="month">
날짜:<input type="week"><br/>
파일업로드:<input type="file">
<input type="hidden" name="hidden" value="securevalue">
  * hidden태그의 목적 : view(폼태그를 이용해서 사용자에게 값을 입력 받지 않아도)가 없어도 임의로 값을 서버로 넘기고 싶은 경우에 사용.           ex) 회원정보 수정 

 

 

 

7) 하이퍼링크

- 클릭하면 다른 문서나 사이트로 바로 이동할 수 있도록 연결

- 문서 내에서 이동

- <a>  </a>

- sref 속성 : 연결된 문서 또는 사이트의 주소(path : 상대, 절대 모두 이미지에서 처리한 방식과 동일함)

- target 속성 : 하이퍼링크로 연결된 문서를 실행할 위치를 정의

 

<a href="/clientweb/html/lounge.html" target="_blank"> 문서연결(절대경로) </a>

<a href="./lounge.html"> 문서연결(상대경로) </a>

<a href="https://www.daum.net" target="_self"> 사이트연결 </a>

  * _self : 현재 위치에서 실행(기본),  _blank : 새 탭에서 실행

   <a href="https://search.~~~대충 내가 원하는 페이지 주소>

   <img alt="고양이" src="/clientweb/images/test/catt.jpg">

     *  이미지를 통한 사이트 연결

 

 

8) 리스트

- 순서 있는 목록 [ o l ]

<ol start="1" type="a">   * 1부터시작, a형태로 => a b c d ~
<li> 내용1 </li>        a. 내용1
<li> 내용2 </li>        b. 내용2

</ol>

 

- 순서 없는 목록 [ u l ]  =>  type 사용 가능

<ul type="circle">      * 네모난 모양
<li> 내용1 </li>  <li> 내용2 </li>

</ul>

  • 내용1
  • 내용2

 

 

'HTML, CSS, JS' 카테고리의 다른 글

2022-09-23 javascript 사용방법, 함수정의  (0) 2022.09.24
2022-09-22 CSS우선순위, 속성  (0) 2022.09.22
2022-09-21(2) CSS  (0) 2022.09.21
2022-09-20 html 파일구조, 테이블  (0) 2022.09.20
2022-09-19 환경구축  (0) 2022.09.19

댓글