inputtype 指南

发布时间：2023-05-23

一、text 文本输入框

input type="text" text 输入框是最基本、最常用的类型，用于接收用户输入的文本或数字。 使用方式：

<form action="demo.php" method="post">
  Name:<input type="text" name="name"><br>
  <input type="submit" value="Submit">
</form>

name 属性定义文本输入框的名称，用于提交表单。当用户输入内容后点击提交按钮，所填的数据将会以 name 属性的值为 key，文本框里的内容为 value 进行提交。 其中 type="submit" 的 input 可以让用户提交表单，或者 button 元素也可以作为提交按钮使用。

二、password 密码输入框

input type="password" password 输入框隐藏用户输入的文本，常用于用户密码或其他敏感信息输入。与 text 类型相似，使用方式也基本相同。 使用方式：

<form action="demo.php" method="post">
  Password:<input type="password" name="pwd"><br>
  <input type="submit" value="Submit">
</form>

注意：password 类型输入框无法使用自动填充功能，既浏览器不会记住密码。

三、radio 单选框

input type="radio" radio 单选框可以让用户从多个选项中选择其中一个。 使用方式：

<form action="demo.php" method="post">
  Gender:<br>
  <input type="radio" name="gender" value="male" checked>Male<br>
  <input type="radio" name="gender" value="female">Female<br>
  <input type="submit" value="Submit">
</form>

以上代码展示了一个包含男、女两个选项的 radio 单选组，并默认选中男性。 name 属性定义了单选组的名称，value 属性则相当于给每个单选框起个名字，当用户选择某一个单选框时，所选的值就会以 name 属性的值为 key，value 属性所设定的值为 value 进行提交。

四、checkbox 复选框

input type="checkbox" checkbox 控件可以让用户从多个选项中任意选择多个（或一个）。 使用方式：

<form action="demo.php" method="post">
  Fruits:<br>
  <input type="checkbox" name="fruit[]" value="apple">Apple<br>
  <input type="checkbox" name="fruit[]" value="banana">Banana<br>
  <input type="checkbox" name="fruit[]" value="orange">Orange<br>
  <input type="submit" value="Submit">
</form>

以上代码展示了一个三个选项的 checkbox 组，并将选中的值保存到一个名为 "fruit[]" 的数组中。 注意：指定一个名为 "fruit[]" 的数组是非常必要的，如果只是简单的使用 name="fruit"，那么只会提交最后一个被选中的项的 value。

五、select 下拉框

<select> 和 <option> select 元素创建了一个下拉列表。通过其中的 option 元素进行选项设置，用户可以在列表中选择一个或多个选项。 使用方式：

<form action="demo.php" method="post">
  City:<br>
  <select name="city">
    <option value="tokyo">Tokyo</option>
    <option value="newyork">New York</option>
    <option value="paris">Paris</option>
    <option value="beijing">Beijing</option>
  </select><br>
  <input type="submit" value="Submit">
</form>

以上代码创建了一个包含 4 个选项的城市列表，选中的值将会以 name 属性的值为 key，选中的 option 的 value 属性的值为 value 进行提交。如果没有设置 value 属性，option 中的文本将会被作为 value 进行提交。

六、submit 提交按钮

input type="submit" 一个表单中需要一个提交按钮，用户点击这个按钮即可提交表单中的数据。 使用方式：

<form action="demo.php" method="post">
  <input type="submit" value="Submit">
</form>

以上代码创建了一个简单的提交按钮。value 属性定义了按钮上显示的文本。

推荐文章