HTML 表單:和用戶交互

表單是用來實現用戶與網站交互的。

一個表單是以開始標籤<form>開始,以結束標籤</form>結尾的。

form元素是一種特殊的容器,它包含的許多XHTML元素只能出現在form元素中的,例如:

fieldset

legend

input

textarea

select


fieldset元素能夠將表單中的相關元素設置成組(在它們周圍用線圈起來),而legend元素則是用來爲這樣的元素組設置標題。

一個例子如下:

HTML代碼如下:

<form method="get" action="nested.html">
      <fieldset>
        <legend>Personal Details</legend>
        <fieldset>
          <legend>Address Details</legend>
            <p>
              <label for="city">City:</label>
              <input type="text" name="city" id="city"/>
            </p>
            <p>
              <label for="yourname">Zip Code:</label>
              <input type="text" name="address" id="yourname"/>
            </p>
        </fieldset>
        <fieldset>
          <legend>Telephone Details</legend>
            <p>
              <label for="city">Home:</label>
              <input type="text" name="city" id="city"/>
            </p>
            <p>
              <label for="yourname">Mobile:</label>
              <input type="text" name="address" id="yourname"/>
            </p>
        </fieldset>
      </fieldset>
      <p><input type="submit" id="submit"/></p>
    </form>


CSS代碼如下:

fieldset fieldset {
        width: 45%;
        float: left;
      }
      #submit {
        margin-bottom: 10px;
        float: right;
      }






發佈了46 篇原創文章 · 獲贊 33 · 訪問量 61萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章