HTML-inputin form* ominaisuudet

Suositeltavat kurssit: <input> Tämä luku esittelee HTML:n elementtien eri Ominaisuudet.

form*

input 的 form-ominaisuus form <input> Ominaisuus määrittää

Elementin kuuluva lomake.

Esimerkki

Tämän ominaisuuden arvon on oltava sama kuin siihen kuuluvan <form>-elementin id-ominaisuus.

Lähde, joka sijaitsee HTML-lomakkeen ulkopuolella mutta on silti osa lomaketta:
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Lähetä">
</form>
<label for="lname">名字：</label>
<form action="/action_page.php" id="form1">

Kokeile itse

<input type="text" id="lname" name="lname" form="form1">

input 的 formaction formaction-ominaisuus

Huomautus:Ominaisuus määrittää, minkä URL:n kautta käsitellään syötteitä (tietoja) lomaketta lähettäessä. <form> Tämä ominaisuus korvaa elementin Ominaisuudet.

formaction 属性适用于以下输入类型：submit 和 image。

Esimerkki

HTML-lomake, jolla on kaksi lähettänpainiketta, joilla on eri toiminnat (action):

<form action="/action_page.php">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Lähetä">
  <input type="submit" formaction="/action_page2.php" value="Lähetä ylläpitäjänä">
</form>

Kokeile itse

formenctype-ominaisuus

input 的 formenctype Ominaisuus määrittää, miten lomaketotiedot koodataan lähetyksen yhteydessä (vain method="post"-lomakkeille).

Huomautus:Tämä ominaisuus korvaa <form> elementin enctype-ominaisuus.

formenctype 属性适用于以下输入类型：submit 和 image。

Esimerkki

Lomake, jolla on kaksi lähettänpainiketta. Ensimmäinen lähettää lomaketotiedot oletuskoodauksella, toinen lähettää "multipart/form-data"-koodauksella:

<form action="/action_page_binary.asp" method="post">
  <label for="fname">Etu nimi:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Lähetä">
  <input type="submit" formenctype="multipart/form-data"
  value="Lähetä Multipart/form-data-koodauksella">
</form>

Kokeile itse

formmethod-ominaisuus

input 的 formmethod Ominaisuus määrittää, minkä HTTP-metodin avulla lomaketotiedot lähetetään action-URL:ään.

Huomautus:Tämä ominaisuus korvaa <form> elementin method-ominaisuus.

formmethod 属性适用于以下输入类型：submit 和 image。

表单数据可以作为 URL 变量（method="get"）或作为 HTTP post 事务（method="post"）发送。

关于 GET 的注意事项：

  • 以名称/值对的形式将表单数据追加到 URL
  • 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
  • URL 的长度受到限制（2048 个字符）
  • 对于用户希望将结果添加为书签的表单提交很有用
  • GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

  • 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
  • POST 没有大小限制，可用于发送大量数据。
  • 带有 POST 的表单提交无法添加书签

提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！

Esimerkki

有两个提交按钮的表单。第一个使用 method="get" 发送表单数据。第二个使用 method="post" 发送表单数据：

<form action="/action_page.php" method="get">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="使用 GET 提交">
  <input type="submit" formmethod="post" value="使用 POST 提交">
</form>

Kokeile itse

formtarget 属性

input 的 formtarget 属性指定一个名称或关键字，该名称或关键字规定在提交表单后在何处显示收到的响应。

Huomautus:Tämä ominaisuus korvaa <form> 元素的 target 属性。

formtarget 属性适用于以下输入类型：submit 和 image。

Esimerkki

有两个提交按钮且有不同目标窗口的表单：

<form action="/action_page.php">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Lähetä">
  <input type="submit" formtarget="_blank" value="提交到新窗口/标签页">
</form>

Kokeile itse

formnovalidate 属性

input 的 formnovalidate 属性规定提交时不应验证 <input> 元素。

Huomautus:Tämä ominaisuus korvaa <form> elementin novalidate-ominaisuus.

formnovalidate Ominaisuus sovelletaan seuraaviin syöttötyyppeihin: submit.

Esimerkki

Lomake, jossa on kaksi lähetyspainiketta (valinta ja ei-validointi):

<form action="/action_page.php">
  <label for="email">Syötä sähköpostiosoitteesi:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Lähetä">
  <input type="submit" formnovalidate="formnovalidate"
  value="Ei validointia lähetettäessä">
</form>

Kokeile itse

novalidate-ominaisuus

novalidate Ominaisuus on <form> Ominaisuudet.

Jos asetettu, novalidate-ominaisuus määrittää, että kaikkia lomaketotietoja ei tarkisteta lähetettäessä.

Esimerkki

Määritä, että mitään lomaketotietoja ei tarkisteta lähetettäessä:

<form action="/action_page.php" novalidate>
  <label for="email">Syötä sähköpostiosoitteesi:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Lähetä">
</form>

Kokeile itse

HTML Form ja Input-elementit

tagi kuvaus
<form> Määritä HTML-lomakkeen käyttäjän syöttö.
<input> Määritä syöttökontrolli.

Jos haluat saada täyden listan kaikista saatavilla olevista HTML-tageista, vieraile HTML tagivihko.