HTML 表单:和用户交互

来源:互联网 发布:淘宝外卖豆子 编辑:程序博客网 时间:2024/06/05 20:04

表单是用来实现用户与网站交互的。

一个表单是以开始标签<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;      }