表單應用場景實體：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表單</legend> <input type="text" name="title"> <input type="text" name="content"> </fieldset> <button>提交</button> </form>
表單描述標簽的使用：
<!-- 方式1 --> <form action="1.php" method="POST"> <fieldset> <legend>cyy表單</legend> <label for="title">標題</label> <input type="text" name="title" id="title"> <hr> <label for="content">內容</label> <input type="text" name="content" id="content"> </fieldset> <button>提交</button> </form> <hr> <!-- 方式2 --> <form action="1.php" method="POST"> <fieldset> <legend>cyy表單</legend> <label>標題 <input type="text" name="title2" id="title2"> </label> <hr> <label>內容 <input type="text" name="content2" id="content2"> </label> </fieldset> <button>提交</button> </form>
表單約束屬性：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表單</legend> <label>標題 <input type="text" name="title" id="title" required value="標題默認值" size="40"> <small>請輸入標題</small> </label> <hr> <label>內容 <input type="text" name="content" id="content" required placeholder="請輸入內容" maxlength="3"> </label> </fieldset> <button>提交</button> </form>
表單訪問限制技巧：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表單</legend> <label>標題 <input type="text" name="title" id="title" value="標題默認值" readonly> <small>請輸入標題</small> </label> <hr> <label>內容 <input type="text" name="content" id="content" disabled> </label> </fieldset> <button>提交</button> </form>
常用欄位型別擴展：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表單</legend> <input type="text" value="文本" > <hr> <input type="password" value="密碼" > <hr> <input type="email" value="郵箱" > <hr> <input type="url" value="url網址" > <hr> <!-- 移動端輸入時會調出撥號鍵盤 --> <input type="tel" value="tel" > <hr> <input type="number" value="數值" > </fieldset> <button>提交</button> </form>
隱藏與表單提交技巧：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表單</legend> <input type="hidden" name="token" value="12345" > <hr> </fieldset> <button>提交</button> <button type="submit">submit可以提交表單</button> <button type="button">普通按鈕，無法提交表單</button> <!-- name值也可以提交過去 --> <input type="submit" value="submit" name="submit"> </form>
表單驗證使用總結：
可以使用優秀的js表單驗證庫
html自帶的表單驗證：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表單</legend> <input type="text" pattern="[a-z]{3}" required oninvalid="valid('用戶名必須，且為3位數英文字母')"> <hr> </fieldset> <button>提交</button> </form> <script> function valid(message){ alert(message); } </script>
大文本與串列框技巧：
<form action="1.php" method="POST"> <fieldset> <legend>cyy表單</legend> <textarea name="content" id="content" cols="30" rows="10" placeholder="請輸入內容">這是默認值</textarea> <hr> <select name="" id=""> <option value="1">item1</option> <option value="2">item2</option> </select> <!-- 設定允許多選 --> <select name="res[]" id="" multiple> <option value="1">item1</option> <option value="2" selected size="30">item2</option> </select> <!-- 分組 --> <select name="" id=""> <optgroup label="group1"> <option value="1">item1</option> <option value="2">item2</option> </optgroup> <optgroup label="group2"> <option value="11">item11</option> <option value="22">item22</option> </optgroup> </select> </fieldset> <button>提交</button> </form>
選項框標準打開方式：
<form action="http://localhost/1.php" method="POST"> <fieldset> <legend>cyy表單</legend> <!-- 單選 --> <input type="radio" name="sex" id="boy" value="1"> <label for="boy">boy</label> <input type="radio" name="sex" id="girl" checked value="2"> <label for="girl">girl</label> <hr> <!-- 復選，需要設定為陣列格式 --> <input type="checkbox" name="sex[]" id="boy" value="1"> <label for="boy">boy</label> <input type="checkbox" name="sex[]" id="girl" checked value="2"> <label for="girl">girl</label> </fieldset> <button>提交</button> </form>
1.php
<?php var_dump($_POST);
結果
檔案上傳：
<form action="http://localhost/1.php" method="POST" enctype="multipart/form-data"> <fieldset> <legend>cyy表單</legend> <!-- 檔案 --> <input type="file" name="image" id="image"> <hr> <!-- 多檔案 --> <input type="file" name="images[]" id="images" multiple> <hr> <!-- 限制上傳格式1 --> <input type="file" name="file1[]" id="file1" accept="image/jpeg,image/png,image/psd"> <hr> <!-- 限制上傳格式2，擴展名形式 --> <input type="file" name="file1[]" id="file1" accept=".jpg,.png,.psd"> </fieldset> <button>提交</button> </form>
時期與時間表單：
<form action="http://localhost/1.php" method="POST" enctype="multipart/form-data"> <fieldset> <legend>cyy表單</legend> <input type="date" name="date" id="date"> <input type="time" name="time" id="time"> <input type="week" name="week" id="week"> <hr> <input type="date" min="2020-10-10" max="2020-12-12" step="5"> <input type="datetime-localhost"> </fieldset> <button>提交</button> </form>
不過還是建議使用第三方組件
搜索表單與datalist資料串列：
<form action="http://localhost/1.php" method="POST" enctype="multipart/form-data"> <fieldset> <legend>cyy表單</legend> <input type="search" list="mydata"> <datalist id="mydata"> <option value="1">item1</option> <option value="2">item2</option> <option value="3">item3</option> </datalist> </fieldset> <button>提交</button> </form>
表單歷史資料自動提示：
<!-- action不加地址，會重繪當前頁 --> <form action="" method="POST"> <fieldset> <legend>cyy表單</legend> <input type="text" autocomplete="on" name="title1"> <input type="text" autocomplete="off" name="title2"> </fieldset> <button>提交</button> </form>
三種串列項使用：
<style> .style1{ list-style:none; } .style2{ list-style-position:inside; list-style-type:circle; } </style> <!-- 有序串列 --> <ol start="1" class="style1"> <li>1</li> <li>2</li> <li>3</li> </ol> <!-- 無序串列 --> <ul class="style2"> <li>1</li> <li>2</li> <li>3</li> </ul> <!-- 自定義串列 --> <dl> <dt>描述標題</dt> <dd>描述內容1</dd> <dd>描述內容2</dd> <dd>描述內容3</dd> </dl>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/203610.html
標籤：Html/Css
上一篇：給萌新HTML5 入門指南（二）