html——表单控件

基本的表单控件还有html5的一些新的表单控件:

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <fieldset>
        <legend>表单</legend>
        <form action="/" method="post">
            账号:<input type="text" name="name" value="" placeholder="请输入..." /><br /><br />
            密码:<input type="password" name="name" value="" maxlength="6" /><br /><br />
            性别:<input type="radio" name="sex" value="" />男&nbsp;&nbsp;<input type="radio" name="sex" value="" />女<br /><br />
            区域:<select>
                <option>北京</option>
                <option>上海</option>
                <option selected="selected">天津</option>
            </select><br /><br />
            分组:<select>
                <optgroup label="华北">
                    <option>北京</option>
                    <option selected="selected">天津</option>
                </optgroup>
                <optgroup label="华东">
                    <option>上海</option>
                    <option>江苏</option>
                </optgroup>
            </select><br /><br />
            多选:<input type="checkbox" name="name" value="" />体育&nbsp;&nbsp;<input type="checkbox" name="name" value="" />唱歌<br /><br />
            文件:<input type="file" name="file" value="" /><br /><br />
            数字:<input type="number" name="name" value="" step="5"/><br /><br />
            滑块:<input type="range" name="name" value="" step="3"/><br /><br />
            重置:<input type="reset" name="name" value="重置" /><br /><br />
            提交:<input type="submit" name="name" value="提交" />
        </form>
    </fieldset> 
</body>
</html>
复制代码

最后效果:

参考:HTML <input> 标签

posted @   var_obj  阅读(307)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示