HTML 5 + CSS 3 + JavaScript 2일차

    <form action="./fe11_inputs.html" method="post"> => 반드시 form 태그 내 입력양식을 넣어야 데이터 전송 가능
        <input type="text" name="userid">
        <input type="password" name="password">
        <input type="submit">
        <input type="file">
    </form>

 

※ method는 전송방식으로 get(주소에 데이터를 직접 입력해 전달)과 post(별도의 방법을 통해 데이터를 해당 주소로 전달)가 있음

 

실행 결과

    <form action="" method="get"> => 이번에는 get 방식으로 데이터를 전달
        <!-- 사용자 입력양식 -->
        <input type="text" name="text"><br>
        <input type="password" name="pass"><br>
        <input type="file" name="profile"><br>
        <input type="checkbox" name="fruit" value="사과"> 사과
        <input type="checkbox" name="fruit" value="바나나"> 바나나
        <input type="checkbox" name="fruit" value="파인애플"> 파인애플<br>
        <input type="radio" name="gender" value="남자"> 남자 =>라디오 박스 name을 묶으면 하나만 선택 가능
        <input type="radio" name="gender" value="여자"> 여자<br>

 

<!-- 히든양식-->
        <input type="hidden" name="code" value="TH1234">

 

     <!-- 버튼 -->
        <input type="button" value="클릭">
        <input type="reset" value="초기화">
        <input type="submit" value="승인"><br>
        <!-- input image 클릭 시 이미지의 x, y값을 전달-->
        <input type="image" src="http://placehold.it/100x100">
        <br>
        <img src="http://placehold.it/200x200">

 

 

get 방식이므로 주소창에 입력, 선택한 값과 히든값도 나오는 모습

실행 결과

input 이미지 클릭 시 x, y값이 전달되어 나오는 모습

- 콤보박스

    <form method="get">
        <select name = "snack" multiple="multiple"> 
            <option value="">--선택--</option>
            <option value="k">김밥</option>
            <option value="d">떡볶이</option>
            <option value="s">순대</option>
            <option value="f">어묵</option> => option으로 선택항목 지정
        </select>

결과

<select name="media"> => name, class는 중복 사용 가능하나 id는 중복 불가
            <optgroup label="html5"> => 그룹 라벨
                <option value="mt">Multimedia Tag</option>
                <option value="co">Connectivity</option>
                <option value="da">Device Access</option>
            </optgroup>
            <optgroup label="css3"> => 그룹 라벨
                <option value="an">Animation</option>
                <option value="3d">3D Transform</option>
            </optgroup>
        </select><br>

 

결과