input元素有哪些类型

135次阅读
没有评论

HTML中的input元素有多种类型,常见的包括:

  1. 文本框(Text):允许用户输入文本内容。
  2. 密码框(Password):用于输入密码等敏感信息,输入的字符会被隐藏。
  3. 单选按钮(Radio):允许用户在多个选项中选择一个选项。
  4. 复选框(Checkbox):允许用户在多个选项中选择多个选项。
  5. 下拉列表框(Select):允许用户从一个下拉菜单中选择一个选项。
  6. 按钮(Button):允许用户点击以触发某些操作。
  7. 提交按钮(Submit):允许用户提交表单数据到服务器。
  8. 重置按钮(Reset):允许用户重置表单中的所有控件值为默认值。
  9. 图像按钮(Image):允许用户点击一个图片,以触发某些操作。
  10. 隐藏域(Hidden):隐藏一个控件,不显示在页面上,但在表单提交时会一同提交到服务器。
  11. 文件上传(File):允许用户上传文件。

以下是一个包含各种类型input元素的HTML页面示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML Input Types Example</title>
</head>
<body>
  <form action="/submit" method="POST">
    <fieldset>
      <legend>Text Input</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required><br>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required><br>

      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required><br>

      <label for="search">Search:</label>
      <input type="search" id="search" name="search"><br>

      <label for="telephone">Telephone:</label>
      <input type="tel" id="telephone" name="telephone"><br>

      <label for="url">URL:</label>
      <input type="url" id="url" name="url"><br>
    </fieldset>

    <fieldset>
      <legend>Radio Buttons and Checkboxes</legend>
      <label>Gender:</label>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">Male</label>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">Female</label><br>

      <label>Interests:</label>
      <input type="checkbox" id="music" name="interest" value="music">
      <label for="music">Music</label>
      <input type="checkbox" id="sports" name="interest" value="sports">
      <label for="sports">Sports</label>
      <input type="checkbox" id="books" name="interest" value="books">
      <label for="books">Books</label><br>
    </fieldset>

    <fieldset>
      <legend>Select Box and Text Area</legend>
      <label for="city">City:</label>
<select id="city" name="city">
    <option value="beijing">Beijing</option>
    <option value="shanghai">Shanghai</option>
    <option value="guangzhou">Guangzhou</option>
  </select><br>

  <label for="comment">Comment:</label><br>
  <textarea id="comment" name="comment" rows="4" cols="50"></textarea><br>
</fieldset>

<fieldset>
  <legend>Buttons</legend>
  <button type="button" onclick="alert('Hello!')">Click Me</button>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
  <input type="image" src="submit.png" alt="Submit">
</fieldset>

<fieldset>
  <legend>Hidden Field and File Upload</legend>
  <input type="hidden" name="userid" value="123">
  <label for="file">File:</label>
  <input type="file" id="file" name="file"><br>
</fieldset>
</form> 
</body> 
</html>

此页面包含各种类型的input元素,包括文本框、密码框、单选按钮、复选框、下拉列表框、按钮、提交按钮、重置按钮、图像按钮、隐藏域和文件上传。这些控件可以根据需要在表单中添加或删除。

正文完
 
评论(没有评论)