場景：在網頁中顯示手機使用者資訊的表單效果。 如：登入頁、註冊頁
標籤名：input
    用法是通過改變type屬性值，來展示不同效果

1.1

html 程式碼
    <!--placeholder 提示符又叫佔位符-->
    暱稱: <input type="text" placeholder="使用者名稱" > <br>

     <!-- 密碼框注意事項：type屬性值不能拼錯或者加空格，否則按普通文字框處理 -->
    密碼: <input type="password" placeholder='登入密碼' > <br>

     <!-- radio屬性裡的name是將單選框分組; checked是設定預設選項  -->
    性別: 
 
<input type="radio" name="sex" checked>男 
          <input type="radio" name="sex" > 女 <br>
 
    愛好:  <input type="checkbox" checked> 敲程式碼
           <input type="checkbox" checked> 文案
           <input type="checkbox" > 遊戲 <br>
    
    <!-- multiple 可以一次選擇多個檔案上傳 -->
     <input type="
 
file" multiple >

效果圖

1.2input系列標籤--按鈕 ；要想使用重置和提交按鈕需要用<form></form> 包裹所有標籤內容

<form >
        <!--placeholder 提示符又叫佔位符-->
        暱稱: <input type="text" placeholder="使用者名稱" > <br>

        <!-- 密碼框注意事項：type屬性值不能拼錯或者加空格，否則按普通文字框處理 -->
        密碼: <input type="
 
password" placeholder='登入密碼' > <br>

        <!-- radio屬性裡的name是將單選框分組; checked是設定預設選項  -->
        性別: <input type="radio" name="sex" checked>男 
            <input type="radio" name="sex" > 女 <br>
    
        愛好:  <input type="checkbox" checked> 敲程式碼
            <input type="checkbox" checked> 文案
            <input type="checkbox" > 遊戲 <br>
        
        <!-- multiple 可以一次選擇多個檔案上傳 -->
        <input type="file" multiple > <br>

        <!-- 按鈕 -->
        <!-- 提交按鈕 -->
        <input type="submit" >
        
        <!-- 重置按鈕 -->
        <input type="reset">

        <!-- 普通按鈕 -->
        <input type="button"  value="普通按鈕">
    </form>

效果圖