#3

[ memo ]

 

* 파일이 올바르게 다 연결된 경우 개발자도구의 Network -> status가 200뜸

 

* form 통신

* get통신 : url주소 맨 끝에 ?로 시작하여 파라미터가 생성된다.

보안이 필요 없는경우
http://mekeyace.dothome.co.kr/test15.php?text=12121211
파라미터 값으로 전달되기때문
text 는 textarea의 name값 (name값은 백엔드 개발자와 약속된 값)

?text=212121121&point=3점
2개전달( &기준 )

* post 통신
(name값은 백엔드 개발자와 약속된 값)

==> get,post 통신
radio,checkbox는 value 속성이 없을 경우 기본은 on,off로 데이터가 표시된다.

ex)

<form method="get" action="http://mekeyace.dothome.co.kr/test15.php">
        댓글입력<br>
        <textarea name="text" cols="40" rows="5"></textarea><br>
        별점<br>
        <select name="point">
            <option>5점</option>
            <option>4점</option>
            <option>3점</option>
            <option>2점</option>
            <option>1점</option>
        </select><br>
        추천<br>
        <input type="radio" name="rec" value="Y">추천함
        <br><br>
        <input type="submit" value="전송">
</form>

    <br><br><br>
    
<form method="post" action="http://mekeyace.dothome.co.kr/test15.php">
        <!-- 
            post 통신 
            파라미터값이 없음 또한 name값으로 백엔드와 데이터 통신을 하게 된다
        -->
        <textarea name="abc" cols="40" rows="5"></textarea><br>
        <input type="submit" value="전송">
</form>​

 

* 파일전송 I/O : input/output

첨부파일 : <input type="file">

<!-- 첨부파일 2개이상 가능 -->
첨부파일2 : <input type="file" multiple>

<!-- accept : 파일 첨부시 첨부할 수 있는 파일 속성명 -->
첨부파일3 : <input type="file" accept="image/*">
첨부파일4 : <input type="file" accept="video/*">
첨부파일5 : <input type="file" accept=".txt,.pdf">

<!-- 모바일 전용 I/O이며 단, microphone은 안드로이드만 가능 -->
첨부파일6 : <input type="file" capture="camera">
첨부파일7 : <input type="file" capture="camcorder" accept="video/*">
첨부파일8 : <input type="file" capture="microphone" accept="audio/*">

 

- form 전송시 I/O는 무조건 POST 방식 사용!

<!--
첨부파일 form 기능시 무조건 enctype에 "multipart/form-data" 미사용시
절대 back-end에게 파일 첨부 내용을 전달하지 못함
-->

<form enctype="multipart/form-data" 
method="post" action="http://mekeyace.dothome.co.kr/fileok.php">
    작성자 : <input type="text" name="mname"><br>
    파일첨부 : <input type="file" name="mfile"><br>
    <input type="submit" value="전송">
</form>

 

* input[type="text"], datalist

<!--
type:text와 datalist 태그를 결합하여 조건검색 형태의 오브젝트를 생성

(input type text의 list값과 datalist의 id값 동일하게)
HTML5전용태그
-->

상품 검색 : <input type="text" name="search" list="data">
<datalist id="data">
    <option>쌀 10kg</option>
    <option>계란</option>
    <option>햄버거</option>
    <option>햄버거 빵</option>
</datalist>

연관검색어..? 기능

이렇게 나옴

 

 

*fieldset 

<!--
fieldset : 그룹 요소 오브젝트
legend : 타이틀(그룹제목), fieldset과 함께 사용/ 단독사용불가

HTML5전용
-->

<fieldset>
    <legend class="t">기업 로그인</legend>
    아이디 : <input type="text"><br>
    사업자 번호 : <input type="text"><br>
    비밀번호 : <input type="password">
</fieldset>

<style>
    .t {
        text-align: center;
        width : 100px;
        height: 25px;
        font-size: 12px;
        background-color: orange;
        border-radius: 25px;
        line-height: 25px;
    }
</style>

 

이렇게 생김

*details 태그

<!--
ul,ol 결합

details : 세부정보를 표시할 때 사용하는 태그
summary : 목록 타이틀
ul : 목차/ li : 리스트

display none/block 처리하는것처럼 클릭시 사라졌다 나왔다 함
모바일에서 주로 사용

HTML5 전용태그
-->

<details>
    <summary>오늘의 저녁 메뉴는?</summary>
    <ul>
        <li>돈까스</li>
        <li>제육볶음</li>
        <li>탕수육</li>
        <li>삼계탕</li>
    </ul>
</details>

이렇게생김 ul이 접혔다 펼쳐졌다함