button & form

기혁·2023년 2월 20일

HTML 학습

목록 보기
5/6
post-thumbnail

day03

button (1)

<form action="http://localhost/form.jsp">
        <input type="submit" value="전송"/> <!--submit : 서버이동하는 버튼-->
        <input type="button" value="버튼" 
            onclick="alert('helloWorld')"/> <!--alert('helloWorld') 자바스크립트 영역-->
    </form>

결과물

submit : 서버이동하는 버튼

button (2)

<form>
        <input type="text"/>
        <input type="submit"/>
        <input type="button" value="버튼"/>
        <input type="reset"/> 
    </form>

결과물

form (1)

<form action="http://localhost/method.jsp"
        method="post"> <!--get : URL 방식으로 이동-->
        <input type="text" name="id" />
        <input type="password" name = "pw" />
        <input type="submit" />
    </form>

결과물

form (2)

 <h1></h1>
        <label for="user_id">아이디 :</label>
        <input type="text" name="user_id" id="user_id"
            maxlength="10" placeholder="아이디를 입력하세요"
            required/> <!-- required : 확인을 눌렀을때 입력하라고 알림주는것-->
        </p>
        <label for="user_pw">비밀번호 :</label>
        <input type="password" name="user_pw" id="user_pw"
            maxlength="20" placeholder="비밀번호를 입력하세요"
            required/>
            <fieldset>
                <legend>성별</legend>
                <div>
                    <label for="sex_m">남자</label>
                    <input type="radio" name="sex"
                    value="남자" id="sex_f" checked/>
                    <label for="sex_f">여자</label>
                    <input type="radio" name="sex"
                    value="여자" id="sex_f"/>
                </div>
            </fieldset>
            <fieldset>
                <legend>좋아하는 과목</legend>
                <div>
                <label for="sub_java">JAVA</label>
                <input type="checkbox" name="sub"
                value="JAVA" id="sub_java" checked/>
                <label for="sub_jsp">JSP</label>
                <input type="checkbox" name="sub"
                value="JSP" id="sub_jsp" checked/>
                <label for="sub_html">HTML</label>
                <input type="checkbox" name="sub"
                value="HTML" id="sub_html" checked/>
                <label for="sub_css">CSS</label>
                <input type="checkbox" name="sub"
                value="CSS" id="sub_css"/>
                </div>
            </fieldset>
           <p></p>
            <div>
            <label for="job">직업</label>
            <select name="job" id="job">
            <option value="Student">학생</option>
            <option value="Teacher">선생님</option>
            <option value="Developer">개발자</option>
            </select>
            </div>
            <p>
            <form action="" method="post"
            enctype="multipart/form-data">
            <input type="file" name="profile"/>
            </p>
            <p>
            <legend>자기소개</legend>
            <textarea name="memo" id="memo"
             maxlength="100" placeholder="자기 소개서를 입력하세요." cols="40" rows="5"></textarea>
             </p>
             <p>
            우편번호 :
            <input type="text" readonly value="서울시 강남구"/>
            <button type="button">우편번호</button>
            </p>
            <p>
            <label for="address">주소 :</label>    
            <input type="text" id="address"/>
            </p>
            <p>
            <label for="address_d">상세주소 :</label>    
            <input type="text" id="address_d"/>
             </p>
             <p>
             <label for="note">참고사항 :</label>
             <input type="text" id="note" disabled/> <!--disabled : 칸을 쓰지못하게만듬-->
             </p>
             <p>
             <input type="reset" value="다시쓰기">
             <input type="submit" value="확인"/>
            </p>
    </form>

결과물

아이디 : required : 확인을 눌렀을때 입력하라고 알림주는것

비밀번호 : 성별
남자 여자
좋아하는 과목
JAVA JSP HTML CSS

직업 학생 선생님 개발자

자기소개 cols와 rows로 크기조절 가능

우편번호 : 우편번호 readonly : 읽기만가능하고 쓰는건 불가능

주소 :

상세주소 :

참고사항 : disabled : 칸을 쓰지못하게만듬

(리셋) (다음페이지 이동)

profile
⭐️내가만든쿠키⭐️

0개의 댓글