表单元素及其格式

1.基本表单格式

<!--method属性值一般为post，action属性值是链接跳转的html文件-->
<form method="post" action="result.html">
    <!--name属性值自己定义，type属性值根据需求选择 -->
    <p>名字：<input name="name" type="text"/> </p>
    <p>密码：<input name="pass" type="password"/> </p>
    <p>
        <!-- 按钮submit表示提交按钮、、reset表示重置按钮、、button表示普通按钮-->
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填"/>
    </p>
</form>
2.文本框：type类型的关键字》》》text
3.密码框：type类型的关键字》》》password
4.单选按钮：type类型的关键字》》》radio
　　　　　　checked表示默认选项为》》男

<form method="post" action="">

    性别<input name="gender" type="radio" value="男" checked/>男
        <input name="gender" type="radio" value="女"/>女
</form
5.多选按钮：type类型的关键字》》》checkbox
6.下拉列表框：通过select和option标签实现
　　　　　　　 selected表示选项框出现的默认选项

<form method="post" action="">

    出生日期:<!--<input name="byear" type="text" value="yyyy" size="4" maxlength="4"/>年-->
    <select name="bmon">
        <option value="" selected>[选择年份]</option>
        <option value="1">1985</option>
        <option value="2">1986</option>
        <option value="3">1987</option>
        <option value="4">1988</option>
        <option value="5">1989</option>
        <option value="6">1990</option>
        <option value="7">1991</option>
        <option value="8">1992</option>
        <option value="9">1993</option>
        <option value="10">1994</option>
        <option value="11">1995</option>
        <option value="12">1996</option>
    </select>月
</form>
7.多行文本框：使用textarea标签完成
　　　　　　　cols指定文本框列的宽度，rows指定行数
　　　　　　　不能使用value属性赋值，需要表示的字体可以写在中间

<h2>自我介绍<textarea name="pingjia" cols="40" rows="6">自信</textarea></h2>
8.文件域：type类型的关键字》》》file

<form action="" method="post" enctype="multipart/form-data">
    <p>
        <input name="file" type="file"/>
        <input name="file" type="submit" value="上传"/>
    </p>
</form>

9.邮箱：type类型的关键字》》》email

<form method="post" action="">
    <h3>邮箱&nbsp;&nbsp;<input name="email" type="email"/></h3>
    <input type="submit" name="submit"/>
</form>

10.网址：type类型的关键字》》》url

<form method="post" action="">
    <p>
    请输入您的网址：
    <input name="url" type="url"/>
    </p>
    <input type="submit"/>
</form>

11.数字：type类型的关键字》》》number
　　　　　　value表示默认值
　　　　　  max表示规定允许的最大值
　　　　　　min表示规定允许的最小值
　　　　　　step表示合法的数字间隔（下面例子中step=“2”，则不能输入51、53之类的数字）

<form>
    前选择数字
    <input name="number" type="number" max="100" min="50" step="2" size="3"/><br/>
    <input name="submit" type="submit"/>
</form>

12.滑块：type类型关键字》》》range
　　　　　　value表示默认值
　　　　　  max表示规定允许的最大值
　　　　　　min表示规定允许的最小值
　　　　　　size表示合法的数字间隔（下面例子中step=“2”，则不能输入51、53之类的数字）

<form>
    前选择数字
    <input name="number" type="range" max="100" min="50" step="2" title="1-100" size="3"/><br/>
    <input name="submit" type="submit"/>
</form>

13.搜索框：type类型关键字》》》search　
　　　　　　size改变搜索框大小

<form>
    请输入您要搜索的关键字
    <input name="search" type="search" size="5"/>
    <input name="subtim" type="submit" value="GO"/>
</form>