Question

我正在研究HTML5和CSS3代码，我创建了我的第一个表单。

我遇到了这个问题：如何让表单响应？

我有这段代码：

<fieldset>
<legend>Prenota il Servizio</legend>
<table>
<tr>
<td>
<label for="nome">Nome*</label>
</td>
<td>
<input type="text" name="nome" autofocus required size="30">
</td>
<td>
<label for="cognome">Cognome*</label>
</td>
<td>
<input type="text" name="cognome" autofocus required size="30">
</td>
</tr>
</table>
</fieldset>

但我该怎样做才能使这种反应更快？

Answer 1

在现代Web 3.0开发中，“响应式设计”涉及CSS3媒体查询。

它们看起来像这样：

// Smartphone Version

@media (min-width: 200px) {

    form {
          width: 150px;
          height: 500px;
    }

}


// Tablet version

@media (min-width: 700px) {

    form {
          width: 350px;
          height: 500px;
    }

}

// Full computer version

@media (min-width: 1024px) {

    form {
          width: 900px;
          height: 500px;
    }

}

这是一个非常简单的例子。主要是，使用CSS来检测哪种屏幕（或其他因素，有很多种），然后在该屏幕（或其他标准）中应用这些样式规则（在{…}内）。

有关Mozilla Dev Network的详细信息，请查看此处：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

在http://www.initializr.com处还有一个启动器解决方案（选择响应式模板并将其构建出来）。

Answer 2

我猜你想要阅读Form标签。

示例：

<form action="demo_form.asp" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

使HTML表单响应

2 个答案: