流萤k423 2024-11-13 13:00 采纳率: 81.4%
浏览 6
已结题

web前端制作HTML表单3

project 4：HTML表单的应用
web前端，用HTML代码编写主题为“同创科技有限公司客户在线调查”的静态网页

img

  • 写回答

2条回答

  • 奔跑草- 2024-11-13 14:11
    关注
    
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>客户在线调查</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .container {
    width: 80%;
    margin: auto;
    padding: 20px;
  }
  form {
    display: grid;
    gap: 10px;
  }
  label {
    display: block;
    margin-bottom: 5px;
  }
  input[type="text"],
  input[type="email"],
  select,
  textarea {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
  input[type="radio"] {
    margin-right: 5px;
  }
  button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    opacity: 0.8;
  }
</style>
</head>
<body>

<div class="container">
  <h2>同创科技有限公司客户在线调查</h2>
  <form action="/submit-form" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>

    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="男" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="女">
    <label for="female">女</label>

    <label for="company">单位:</label>
    <input type="text" id="company" name="company">

    <label for="position">职务:</label>
    <input type="text" id="position" name="position">

    <label for="phone">电话:</label>
    <input type="text" id="phone" name="phone">

    <label for="address">地址:</label>
    <input type="text" id="address" name="address">

    <label for="postcode">邮编:</label>
    <input type="text" id="postcode" name="postcode">

    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required>

    <label>您对本公司的产品满意度:</label>
    <select name="satisfaction" id="satisfaction">
      <option value="very_satisfied">很满意</option>
      <option value="satisfied">满意</option>
      <option value="basically_satisfied">基本满意</option>
      <option value="average">一般</option>
      <option value="dissatisfied">差</option>
      <option value="very_dissatisfied">很差</option>
    </select>

    <label>您对本公司的服务态度评价:</label>
    <textarea name="service_evaluation" id="service_evaluation" rows="3"></textarea>

    <label>您对哪些方面的产品感兴趣?</label>
    <div>
      <input type="checkbox" id="personal_pc" name="interest[]" value="个人PC">
      <label for="personal_pc">个人PC</label>
      <input type="checkbox" id="data_code" name="interest[]" value="数码">
      <label for="data_code">数码</label>
      <input type="checkbox" id="server" name="interest[]" value="服务器">
      <label for="server">服务器</label>
      <input type="checkbox" id="network_equipment" name="interest[]" value="网络设备">
      <label for="network_equipment">网络设备</label>
      <input type="checkbox" id="software" name="interest[]" value="软件">
      <label for="software">软件</label>
      <input type="checkbox" id="office_equipment" name="interest[]" value="办公室设备">
      <label for="office_equipment">办公室设备</label>
    </div>

    <label>您认为本公司工作中，主要存在什么问题？还有哪些方面有待进一步改善？</label>
    <textarea name="improvement_suggestions" id="improvement_suggestions" rows="6"></textarea>

    <button type="submit">提交</button>
    <button type="reset">重置</button>
  </form>
</div>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • Web前端 | HTML表单form
    2022-09-20 17:45
    @每天都要敲代码的博客 Web前端 | HTML表单form
  • web前端大作业-多种表单合集网页模板-界面适配移动设备-HTML源码.zip
    2024-05-28 17:53
    现在，我们为你带来一份精心制作的Web前端大作业源码——多种表单合集网页模板。 功能亮点 多表单集成：一次下载，拥有多种常见表单模板，满足不同项目需求。 移动设备适配：无论手机还是平板，都能获得流畅、舒适...
  • web前端开发基础（制作表单类页面）
    2023-10-16 19:01
    菜鸡小泽的博客 Web前端开发之表单的制作和Input控件的使用
  • Web前端——HTML表单及表格
    2022-09-26 21:38
    枕鸿的博客 3、form的属性：（1）action：放置后台地址 （2）method：请求方式 get post。代表表头 代表行 代表表头中的列。 元素在 元素中使用，用来声明允许用户输入数据的 input 控件。代表表身体 代表行 代表表身体中的列。...
  • web前端开发（一）—HTML基础
    2018-07-31 23:41
    鸣珂锵玉的博客 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、...
  • Web前端——表格表单练习
    2022-11-10 13:45
    Q鑫的博客 <td class="td2"><img src="E:\Web前端作业\project02\images\金刚狼3：殊死一战.png">td> tr> <tr> 明日的我与昨日的我td> 速度与激情td> 极速特工td> 金刚狼3：殊死一战td> tr> table> body> html> 网页效果图： ...
  • web 前端开发Form表单
    2024-02-08 11:30
    ++帅的博客 表单在web网页中用来给用户填写信息，从而能采用用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来填写，如登陆注册、搜索框表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框...
  • web前端 --- 表单标签
    2023-04-17 13:52
    雨天_的博客 标签用于定义表单域，以实现用户信息的收集和传递，将范围内的表单元素提交给服务器。
  • Web前端HTML5表单的应用——调查问卷
    2022-10-25 22:27
    最爱点点了的博客 当用户单击提交按钮后就会将表单中填写的用户信息提交给服务器。其中体重的type类型为number表示只能填写数字格式内容；颜色的type类型为color，表示在颜色板中选择颜色。(注:number和color为HTML5新增的type类型)
  • web前端基础（一）——HTML+CSS
    2021-08-18 08:38
    广龙宇的博客 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. ...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 11月19日
  • 已采纳回答 11月13日
  • 创建了问题 11月13日