码迷,mamicode.com
首页 > 其他好文 > 详细

DOM之Form对象(二)表单字段元素

时间:2015-04-20 21:01:06      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:

HTML的密码域

<html>
<body>
    <form>
        用户:
        <input type="text" name="user">
        <br>
        密码:
        <input type="password" name="password">
    </form>
    <p>
        请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字符。
    </p>
</body>
</html>
技术分享

在HTML页中创建文本框,用户可以选中或取消选取复选框

<html>
<body>
    <form>
        我喜欢自行车:
        <input type="checkbox" name="Bike">
        <br>
        我喜欢汽车:
        <input type="checkbox" name="Car">
    </form>
</body>
</html>
技术分享
在HTML中创建单选按钮

<html>
<body>
    <form>
        男性:
        <input type="radio" checked="checked" name="Sex" value="male">
        <br>
        女性:
        <input type="radio" name="Sex" value="female">
    </form>
    <p>当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态。</p>
</body>
</html>

技术分享
创建一个简单的带有预选值的下拉列表。(注:预选值指预先指定的首选项。)

<html>

<body>

    <form>
        <select name="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat" selected="selected">Fiat</option>
            <option value="audi">Audi</option>
        </select>
    </form>

</body>
</html>
技术分享

创建按钮

<html>

<body>

    <form>
        <input type="button" value="Hello world!">
    </form>

</body>
</html>
技术分享

在数据周围绘制一个带标题的框

<html>

<body>

    <fieldset>
        <legend>健康信息:</legend>
        <form>
            <label>身高:<input type="text" /></label>
            <label>体重:<input type="text" /></label>
        </form>
    </fieldset>

    <p>如果输入表单周围没有边框,说明您的浏览器太老了。</p>

</body>
</html>
技术分享

从表单发送电子邮件

<html>

<body>
    <form action="http:///someone@w3school.com.cn"
        method="post" enctype="text/plain">

        <h3>这个表单会把电子邮件发送到 W3School。</h3>
        姓名:<br>
        <input type="text" name="name" value="yourname" size="20">
        <br>
        电邮:<br>
        <input type="text" name="mail" value="yourmail" size="20">
        <br>
        内容:<br>
        <input type="text" name="comment" value="yourcomment" size="40">
        <br>
        <br>
        <input type="submit" value="发送">
        <input type="reset" value="重置">
    </form>
</body>
</html>
技术分享

DOM之Form对象(二)表单字段元素

标签:

原文地址:http://blog.csdn.net/lindonglian/article/details/45154307

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!