Question

我用HTML和CSS创建了我的第一个Web表单，但我不知道如何使其正常运行。它可以用HTML和CSS完成，还是需要使用JQuery或JavaScript？

是否可以将整个表单看作一个按钮？然后，当用户点击按钮时，Web表单就会很好地向下滚动。

以下是我目前工作的链接：http://jsfiddle.net/ckvgq/4/

<body>
    <div id="inputs">
     <form>
         First & last name:<input class='textbox' type='text' name='Aloha' value='Aloha'><br/>
         E-mail:<input class='textbox' type='text' name='Yello!' value='Yello!'><br/>
         <input type='checkbox' checked>Check if you'd like to follow this page?<br/>
         </form>
     </div>
     <p>Type your message here:</p><br/>
         <textarea></textarea><br/>
         <input type='submit'>
    </body>


form {
    font-family: Verdana, Arial, sans-serif;
}
p {
    font-family: Verdana, Arial, sans-serif;
    display: inline-block;
}
input {
    font-family: Verdana, Arial, sans-serif;
    color: #123456;
}
textarea {
    vertical-align: top;
    width: 400px;
    color: yellow;
    background-color: navy;
}
#inputs {
    width: 400px;
    clear: both;
}
.textbox{
    background-color: navy;
    color: yellow;
}

Answer 1

确保所有表单数据都在form - 标记之间。还要确保在form中放置适当的属性，以便将其发送到正确的页面。您将提交按钮放在表单之外。这就是为什么当你点击它时会发生的事情。

一个小例子：

<body>
    <form action="/somewhere.php" method="post">
        <div>Name: <input type="text" name="name" placeholder="Name" /></div>
        <div>Email: <input type="text" name="email" placeholder="Email" /></div>
        <div><input type="submit" value="Send data" /></div>
    </form>
</body>

CSS与表单的功能无关。

我建议你看看这个tutorial，因为这是非常基本的HTML。

Answer 2

你的意思是这样的： http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/ 要么 http://www.usabilitypost.com/2011/04/19/pure-css-slideout-interface/ 如果你谷歌'css slidein登录框''我相信你会找到你喜欢的东西。

如何使这个Web表单功能？

2 个答案: