HTML-フォームラベル/div、span

25234 ワード

📌 フォームタグ

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title> </title>
    </head>

    <body>
        <form action="#서버 주소" method="get">
            <!-- get방식과 post 방식이 있다.
            정보가 가는 방식
            get : 보안에 취약하다. (url에 그대로 보여짐/ 노출이 됨.)
            post : 정보가 암호화되어서 서버로 간다. 은닉화처리 -->
            
            이름 : <input type="text" name="uname"/><br>
            아이디 : <input type="text" name="uid"/><br>
            비밀번호 : <input type="password" name="upw"/><br>
            연락처 : <input type="text" name="uphone1" size="5"/>-
            <input type="text" name="uphone2" size="5"/>-<input type="text" name="uphone3" size="5"/><br>
            사진 : <input type="file" name="upic"/><br>
            성별 구분 : <input type="radio" name="gender" value="w">여,
            <input type="radio" name="gender" value="m"><br>
            사용언어 : <input type="checkbox" name="lan" value="kor">한글,
            <input type="checkbox" name="lan" value="eng">영어,
            <input type="checkbox" name="lan" value="jap">일본어,
            <input type="checkbox" name="lan" value="ch">중국어<br>
            자기소개 : <textarea rows="5" cols="20">간단하게 입력하세요.</textarea><br>
            국적 : <select>
                <option>korea</option>
                <option>usa</option>
                <option>japan</option>
                <option>china</option>
            </select><br>
    
            좋아하는 음식 : <select multiple="multiple">
                <option>김치</option>
                <option>불고기</option>
                <option>파전</option>
                <option>비빔밥</option>
            </select><br>
            <input type="submit">
    
        </form>
    </body>

</html>

📌 div, span

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <div>block-01</div>
        <div>block-02</div>
        <div>block-03</div>
        <div>block-04</div>

        <p>block-tag</p>
        <ul>
            <li>block-tag2</li>
            <li>block-tag2</li>
            <li>block-tag2</li>
        </ul>

        <br>

        <span>inline-01</span>
        <span>inline-02</span>
        <span>inline-03</span>
        <span>inline-04</span>

    </body>
</html>