HTML練習（三）

時間 2019-12-18

標籤 html 練習欄目 HTML 简体版

原文原文鏈接

1、HTML表單html

表單用於蒐集不一樣類型的用戶輸入，表單由不一樣類型的標籤組成，相關標籤及屬性用法以下：前端

一、<form>標籤定義總體的表單區域python

action屬性定義表單數據提交地址
method屬性定義表單提交的方式，通常有「get」方式和「post」方式

二、<label>標籤爲表單元素定義文字標註瀏覽器

三、<input>標籤定義通用的表單元素frontend

type屬性
- type="text" 定義單行文本輸入框
- type="password" 定義密碼輸入框
- type="radio" 定義單選框
- type="checkbox" 定義複選框
- type="file" 定義上傳文件
- type="submit" 定義提交按鈕
- type="reset" 定義重置按鈕
- type="button" 定義一個普通按鈕
- type="image" 定義圖片做爲提交按鈕，用src屬性定義圖片地址
- type="hidden" 定義一個隱藏的表單域，用來存儲值
value屬性定義表單元素的值
name屬性定義表單元素的名稱，此名稱是提交數據時的鍵名

四、<textarea>標籤定義多行文本輸入框post

五、<select>標籤定義下拉表單元素學習

六、<option>標籤與<select>標籤配合，定義下拉表單元素中的選項spa

　　HTML表單練習：code

　　（1）編輯html文件：orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單</title>
</head>
<body>
    <h1>註冊表單</h1>
    <form action="" method="get">        
        <div>
            <label for="username">用戶名：</label>
            <input type="text" name="username" id="username" />
        </div>        
        <br>
        <div>
            <label for="password">密&nbsp;&nbsp;&nbsp;碼：</label>
            <input type="password" name="password" id="password">
        </div>
        <br>
        <div>
            <label>性&nbsp;&nbsp;&nbsp;別：</label>
            <input type="radio" name="gender" value="0" id="male"> <label for="male">男</label>
            <input type="radio" name="gender" value="1" id="female"> <label for="female">女</label>
        </div>
        <br>
        <div>
            <label>愛&nbsp;&nbsp;&nbsp;好：</label>
            <input type="checkbox" name="like" value="study"> 學習
            <input type="checkbox" name="like" value="python"> python
            <input type="checkbox" name="like" value="frontend"> 前端
            <input type="checkbox" name="like" value="beauty"> 美少女

        </div>

        <br>

        <div>
            <label>玉&nbsp;&nbsp;&nbsp;照：</label>
            <input type="file" name="">
        </div>
        <br>

        <div>
            <label>我的介紹：</label>
            <textarea name="introduce"></textarea>
        </div>
        
        <br>

        <div>
            <label>籍&nbsp;&nbsp;&nbsp;貫：</label>
            <select name="site">
                <option value="0">北京</option>
                <option value="1">上海</option>                    
                <option value="2">河南</option>    
                <option value="3">河北</option>    
                <option value="4">廣州</option>    
            </select>

        </div>
        <br>

        <input type="hidden" name="hid01" value="12">

        <div>


            <input type="submit" name="" value="提交">

            <!-- <input type="image" src="images/goods.jpg" name=""> -->


            <input type="reset" name="" value="重置">
        </div>


    </form>
</body>
</html>

　　（2）瀏覽器預覽效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。