案例1:
下面的代碼演示了如何使用<div form表單>創(chuàng)建一個簡單的登錄表單:
<code> <form> <div> <label for="username">用戶名:</label> <input type="text" id="username" name="username"> </div> <div> <label for="password">密碼:</label> <input type="password" id="password" name="password"> </div> <div> <input type="submit" value="登錄"> </div> </form> </code>
在以上代碼中,我們使用了<div>標簽來創(chuàng)建表單的容器,并在其中放置了兩個<label>標簽和兩個<input>標簽。第一個<label>用于顯示“用戶名”文本,對應(yīng)的輸入字段是一個文本輸入框。第二個<label>用于顯示“密碼”文本,對應(yīng)的輸入字段是一個密碼輸入框。最后,在<div>內(nèi)部還放置了一個<input type="submit">按鈕用于提交表單。在實際運用中,用戶輸入的數(shù)據(jù)會被發(fā)送到服務(wù)器進行驗證或處理。
案例2:
下面的代碼演示了如何在<div form表單>中使用復(fù)選框和單選框:
<code> <form> <div> <label for="fruit">選擇你喜歡的水果:</label> <div> <input type="checkbox" id="fruit1" name="fruit" value="apple"> <label for="fruit1">蘋果</label> </div> <div> <input type="checkbox" id="fruit2" name="fruit" value="banana"> <label for="fruit2">香蕉</label> </div> </div> <div> <label>選擇你的性別:</label> <div> <input type="radio" id="gender1" name="gender" value="male"> <label for="gender1">男性</label> </div> <div> <input type="radio" id="gender2" name="gender" value="female"> <label for="gender2">女性</label> </div> </div> <div> <input type="submit" value="提交"> </div> </form> </code>
在以上代碼中,我們依然使用了<div>標簽來創(chuàng)建表單的容器,并在其中放置了兩組<input>標簽。第一組是復(fù)選框,用戶可以選擇多個選項,對應(yīng)的value值將會作為提交時的數(shù)據(jù)。第二組是單選框,用戶只能選擇其中一個選項。每個選項都有一個對應(yīng)的<label>標簽,用于顯示文本。
案例3:
下面的代碼演示了如何在<div form表單>中使用下拉列表框:
<code> <form> <div> <label for="fruit">選擇你喜歡的水果:</label> <div> <select id="fruit" name="fruit"> <option value="apple">蘋果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select> </div> </div> <div> <input type="submit" value="提交"> </div> </form> </code>
在以上代碼中,我們使用<select>標簽創(chuàng)建了一個下拉列表框,用戶可以通過點擊下拉箭頭選擇其中的一個選項。每個選項都被包含在一個<option>標簽中,對應(yīng)的value值將會作為提交時的數(shù)據(jù)。<select>標簽被放置在<div>內(nèi)部。
通過以上案例,我們可以看出<div form表單>標簽的基本用法。它提供了一個靈活的方式來創(chuàng)建各種表單元素,并方便地進行布局和樣式控制。在實際應(yīng)用中,還可以通過CSS和JavaScript來對表單進行進一步的美化和交互操作,提升用戶體驗。