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 Dev Network の詳細については、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 に答える