XHTML表单

XHTML的表单

在网页文档中添加一堆<form></form>标记对，就在网页中创建了定义了一个表单

<form>标记有如下的最小格式：

<form action="表单处理程序的URL“method="get|post">

使用输入控件

HTML支持多种输入控件，包括文本和口令字段、复选框、单选框、提交和重置按钮、隐藏域和图像

input ：该元素使用 type 属性定义不同的控件，包括文本和口令字段、复选框、单选框、提交和重置按钮、隐藏域和图像

select 和option ：二者组合使用，创建一个下拉列表

textarea ：创建一个多行输入的文本框

我们将<input》标记的type属性值设置为password，就创建一个口令字段，例如：

<form id="myform" name="myform" action="#" method="post">
    <p>姓<input type="text" id="firstname" size="30" maxlength="25" /></p>
    <p>名<input type="text" id="lastname" size="30"maxlength="20"  /></p>
    <p>口令<input type="password" id="password" size="30" max="20"  /></p>

</form>

复选框

<--复选框-->
<form id= "myForm" action="#" method="post">
    <p>请选择你想要去旅游的城市</p>
    <p>
        <input type="checkbox" name="city" id="sh" value="shanghai" checked="checked">上海</input><br />
        <input type="checkbox" name="city" id="cd" value="成都">成都</input><br />
        <input type="checkbox" name="city" id="xa" value="西安">西安</input><br />

    </p>
    <p>你的性别</p>
    <p>
        <input type="radio" name="gender" id="male">男</input><br />
        <input type="radio" name= "gender" id="female">女</input><br />
    </p>
</form>

隐藏字段

隐藏字段给我们提供了一种方法，在用户可以看见的表单控件之外，收集了名称和值的信息，如果我们想跟踪与表单信息相关的信息时，隐藏字段是相当有用的

<form id="myform" name= "myform" action="#" method="post">
    <input type="hidden" id="e-mail" value="me@mysite.com" />
    <p> 姓：<input type="text" id="firstname" size="30" maxlength="25"></p>
    <p>名：<input type="text" id="lastname" size="30" maxlength="25"> </p>
    <p>口令：<input type="password" id="password" size="30" maxlength="25"> </p>
</form>
文件上传控件
<form id="myform" action="#" method="post" enctype="from/multipart">
    <p>请以word文档格式提供您的简历</p>
    <input type="file" if="resume" />
下拉列表

<--下拉列表多选-->
<form id="myform" name="myform" action="#" method="post">
    <p>你最喜欢的地方</p>
    <select name="food" if="food" multiple="multiple" size="5">
        <option value="sichuan">四川</option>
        <option value="yunnan">云南</option>
        <option value="kunming">昆明</option>
        <option value="dali">大理</option>
        <option value="xglla">香格里拉</option>
        <option value="beijing">北京</option>

    </select>
</form>
<--下拉列表-->
<form id="myform" name="myform" action="#" method="post">
    <p>你最喜欢的地方</p>
    <select name="food" if="food">
        <option value="sichuan">四川</option>
        <option value="yunnan">云南</option>
        <option value="kunming">昆明</option>
        <option value="dali">大理</option>
        <option value="xglla">香格里拉</option>
        <option value="beijing">北京</option>

    </select>
</form>

多行文本框

<--多行文本框>
<form id="myform" name="myform" action="#" method="post">
    <textarea row="50" cols="100" id="comment"
              style='overflow:scroll;overflow-x:hidden;resize:none;outline:none;'>请在此输入文本
              <--不允许拉动-->
    </textarea>