首页html5+js写一个表单，包括姓名性别生日，重置和提交按钮在同一行

html5+js写一个表单，包括姓名性别生日，重置和提交按钮在同一行

时间: 2024-10-17 09:13:50 浏览: 19

HTML5和JavaScript可以结合创建一个简单的表单，下面是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>表单示例</title> <style> .form-row { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } </style> </head> <body> <form id="myForm" onsubmit="event.preventDefault(); handleFormSubmit(event)"> <div class="form-row"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required> </div> <div class="form-row"> <label for="gender">性别:</label> <select id="gender" name="gender"> <option value="">请选择</option> <option value="male">男</option> <option value="female">女</option> </select> </div> <div class="form-row"> <label for="birthday">生日:</label> <input type="date" id="birthday" name="birthday" required> </div> <button type="reset" class="btn-reset">重置</button> <button type="submit" class="btn-submit">提交</button> </form> <script> function handleFormSubmit(event) { event.target.reset(); // 重置表单 console.log('表单数据:', new FormData(event.target)); // 打印并处理提交的数据 } </script> </body> </html> ``` 在这个例子中，表单包含了姓名、性别选择和生日输入框，重置和提交按钮都放在了同一行(`.form-row`)，通过CSS的`flex`布局实现了对齐。点击提交按钮会触发`handleFormSubmit`函数，防止默认的表单提交行为，并在控制台打印出表单数据。

阅读全文