html表单控件

77次阅读
没有评论

HTML表单控件可以分为以下几种类型:

  1. 文本输入框(Text input):用于输入文本,可以用于单行文本和多行文本,例如输入框和文本域。
  2. 选择框(Select):用于选择单个或多个选项,例如下拉菜单和复选框。
  3. 按钮(Button):用于提交表单或执行其他操作,例如提交按钮和重置按钮。
  4. 单选按钮(Radio button):用于在一组选项中选择一个,例如选择性别。
  5. 复选框(Checkbox):用于选择一个或多个选项,例如选择兴趣爱好。
  6. 文件上传框(File upload):用于选择要上传的文件。
  7. 隐藏域(Hidden):不显示在页面上,用于存储额外的信息,例如会话ID。

以下是一个使用UTF-8编码的HTML页面的完整示例,包括文本输入框、选择框、单选按钮、复选框、文件上传框和提交按钮:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML表单示例</title>
  </head>
  <body>
    <h1>HTML表单示例</h1>
    <form action="submit.php" method="post" enctype="multipart/form-data">
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name"><br>
      <label for="gender">性别:</label>
      <select id="gender" name="gender">
        <option value="male">男</option>
        <option value="female">女</option>
      </select><br>
      <label>爱好:</label>
      <input type="checkbox" id="hobby1" name="hobby[]" value="reading">
      <label for="hobby1">阅读</label>
      <input type="checkbox" id="hobby2" name="hobby[]" value="music">
      <label for="hobby2">音乐</label>
      <input type="checkbox" id="hobby3" name="hobby[]" value="sports">
      <label for="hobby3">运动</label><br>
      <label>学历:</label>
      <input type="radio" id="edu1" name="edu" value="primary">
      <label for="edu1">小学</label>
      <input type="radio" id="edu2" name="edu" value="junior">
      <label for="edu2">初中</label>
      <input type="radio" id="edu3" name="edu" value="senior">
      <label for="edu3">高中</label><br>
      <label for="resume">简历:</label>
      <input type="file" id="resume" name="resume"><br>
      <input type="submit" value="提交">
    </form>
  </body>
</html>

在此示例中,我们使用<form>标签来创建一个表单,并指定了提交表单的目标URL和请求方法。使用<label>标签为每个表单控件添加标签,并使用

正文完
 
评论(没有评论)