添加提交按钮进行输入

时间:2012-12-11 16:44:07

标签: html css

我有一个类型按钮的输入,用于验证表单是否为文本类型的输入。

我已经看到,例如,bootstrap允许你将一些值附加到输入。我想知道如何将类型按钮的这个输入附加到我的文本类型输入中。

我添加了一个关于我如何思考它的截图,但我不确定我会选择哪种CSS策略。

由于

enter image description here

2 个答案:

答案 0 :(得分:1)

它只是一个带有文本字段的提交按钮

Demo

HTML

<div class="wrap">
   <input type="text" />
   <input type="button" value="Demo" />
</div>

CSS

.wrap {
    display: inline-block;
    position: relative;
}

input[type=text] {
    padding: 10px;
    width: 300px;
    padding-right: 60px;
}

input[type=button] {
    padding: 2px;
    position: absolute;
    right: 5px;
    top: 5px;
}

答案 1 :(得分:0)

以下是示例代码。这应该有所帮助。

<form class="form-search pull-right">
        <div class="input-append">
            <input type="text" class="span2 search-query">
            <button type="submit" class="btn">Validate</button>
        </div>
</form>

Bootstrap还有两个功能。追加和前置。 Prepend在文本字段之前添加按钮,append在文本字段之后添加按钮。两人都加入了!

您只需加载引导文件并将上述代码添加到您的html / php文件中即可。你完成了!