0

我正在研究 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>

但是我能做些什么来使这个响应？

4

3 回答 3

4

在现代 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 开发网络的详细信息：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

在http://www.initializr.com上还有一个入门解决方案（选择响应式模板并构建它）。

于 2013-07-09T22:14:32.510 回答
0

我猜您想阅读有关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>
于 2013-07-09T20:51:56.050 回答
0 
<!DOCTYPE html>
<html>
  <head>
    <title>BUG-13</title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <style>
    

    .fieldset
    {
    width:50%;
    }
    .form-inline
    {
    height: 11px;
    width: 80%;
    border: 1px solid #928383;
    margin-left: 15px;
    }
    @media only screen and (max-width: 360px)
    {
    .fieldset
    {
    font-size: 10px;
    color:red;
    font-size:10px;
    }
    }
    </style>   
  </head>
  <body>
    <fieldset class="form">
      <legend>Prenota il Servizio</legend>
      <table>
        <tr>
          <td>
            <label for="nome">Nome*</label>
          </td>
          <td>
            <input class="form-inline" type="text" name="nome" autofocus required size="30">
          </td>
          <td>
           <label for="cognome" style="padding-left: 14px;">Cognome*</label>
          </td>
          <td>
            <input   class="form-inline" type="text" name="cognome" autofocus required size="30">
          </td>
        </tr>
      </table>
    </fieldset>
  </body>
</html>
于 2021-10-11T13:05:27.223 回答