html基礎知識-表格標籤（form，input）

阿新 • • 發佈：2021-12-20

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- <title></title>
        form 、input
            form：表單最外層容器(如果沒有form標籤，其他功能點選沒響應)
            input：使用者搜尋使用者資訊 如：輸入框，密碼框等
            type：
            test 普通文字輸入框
            password 密碼輸入框
                placeholder 
="回顯內容" 回顯內容
            checkbox 複選框
                checked  預設勾選複選框
                disabled  不可勾選該複選框
            radio 單選框
                    name="值" 只可勾選一個單選框
            file  上傳檔案
            submit 點選提交
                action=“地址” 傳入後臺的地址
            reset 點選重置
                輸入的資料都被清空
            textarea
                cols 
="100" 佔多少列 
                rows="100" 佔多少行
            select
                option 下拉框
                selected 預設選中
                size  顯示幾項
                multiple  可多選
                label for 可根據文字勾選複選框
    </head> -->
    <body>
        <form action="http://www.baidu.com">
        1 
.普通文字輸入框
        <input type="text"  placeholder="請輸入使用者名稱"/><br />
        2.密碼輸入框
        <input type="password" placeholder="請輸入密碼" /><br />
        3.複選框
        <input type="checkbox" checked/>男
        <input type="checkbox" disabled=""/>女<br />
        4.單選框
        <input type="radio" name="可勾選一個"/>男
        <input type="radio" name="可勾選一個"/>女<br />
        5.上傳檔案
        <input type="file" /><br />
        6.提交按鈕
        <input type="submit" /><br />
        7.重置
        <input type="reset" /><br>
        8.多行文字框
        <textarea placeholder="請輸入您的內容" cols="50" rows="20"></textarea><br>
        9.下拉選單
        1.預設<br />
        <select>
            <option selected disabled>請選擇</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select><br />
        2.頁面展示幾項內容<br />
        <select size="3">
            <option selected disabled>請選擇</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select><br />
        3.可多選<br />
        <select multiple>
            <option selected disabled>請選擇</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select><br />
        4.上傳檔案也可以多選檔案
        <input type="file" multiple/><br>
        5.通過點選男女，則勾選單選框
        <input type="radio" name="0" id="1" /><label for="1">男</label>
        <input type="radio" name="0" id="2" /><label for="2">女</label>
        </form>
    </body>
</html>