HTML-폼관련 속성들

임재헌·2023년 3월 24일
0

HTML

목록 보기
14/20
<!DOCTYPE html>   
<html lang="ko"> 
<head>
       <title> form </title> 
    </head>
    <body>

    <!--                    -->
    <h3>폼 관련된 속성들</h3>
        <!-- 
            id=""   폼 아이디 (주로 frontend에서 접근시 사용)
            name="" 폼 이름(주로 backend 접근시 사용)
            action=""   사용자가 입력 요청한 정보를 서버측에서 받는 페이지명 혹은 명령어
                        폼을 받는 페이지
            method ="" 전송방식 get or post
            enctype="" 파일이 인코딩 되는 형식
        -->
        <!-- -->
        <form action="ok.jsp" name="loginform" id="loginform">
            아이디: <input type="text" name="useid"> <hr>
            비밀번호: <input type="password" name="userpw"> <hr>
            <input type="submit" value="전송">

        </form>
        <hr>
        <!--   파일 첨부해서 전송      -->
        <form enctype="multipart/form-data">
            파일: <input type="file">
        </form>
        <!-- 전송방식  get or post  -->
        <form method="get"></form>
        
        <h3> 2. type=image </h3>
        <form action="ok2.jsp">
            <img src="../images/b_muzi.png" alt="무지">
            <hr>
            <!-- img src = ''+ type = submit 기능 -->
            <input type="image" src="../images/b_apeach.png">
            <hr>
            검색: <input type="text" name="search">
            <input type="image" src="../images/b_tube.png">
        </form>
        <hr>

        <h3>다양한 input type</h3>
        <input type="hidden" id="page" name="page" value="3">
        <!-- html페이지 상에서 노출은 안되지만 form에 포함된 요소-->
        <hr>
        <input type="number" id="quantity" name="quantity" min="1" max="5">
        <input type="range" id="vol" name="vol" min="0" max="50">
        <hr>
   
        <input type="color"><hr>
        <input type="data"><hr>
        <input type="search"><hr>
        <input type="time"><hr>
        <input type="date"><hr>
        <h3>label   </h3>
        <label for="user">이름:</label>
        <input type="text" id="user">

    </body>
</html>
profile
임재헌
이전 포스트

HTML-회원가입 페이지 작성

다음 포스트

HTML-Block

0개의 댓글

관련 채용 정보