Question

我尝试在表单上创建字段供用户提交生日，但月份，日期和年份的下拉列表从未出现过。所以我只需要在表格的一个下拉菜单中输入月份和日期。

如何使用html创建三个字段以填写表单（月，日，年）上的生日信息。

当用户使用javascript提交申请时，如何让它显示出来？

＆＃13;

<script type='text/javascript'>
var form_script = {
form_id: $('#generic_form'),
status_id: $('#send_form'),
specific_id: $('#form_spec'),
enable_guests: false,
pm: {
enabled: false, // Does not work for guests
user: "", // 1 user only
title: "New acceptance test From {{user_name}}",
content: "{{form}}"
},
topic: {
enabled: true,
forum_id:3240482, // 1 id only
title: "About Me",
description: "Biography",
content: "{{form}}"
},
statuses: {
not_logged_in: "Error! You must be logged in to make an introduction topic.", // Used if enable_guests: false
first: "Verifying...",
second: "Processing...",
done: "Your introduction topic has been posted. You may customize your topic and edit the title."
},
submission_formatting: {
separator: ' ',

before_all: '',
after_all: '',

before_question: '[b]',
after_question: '[/b]',

before_response: '[i]',
after_response: '[/i]'
},
possible_elements: 'input, textarea, select' // For the second column of table; .val() must work on it
};
</script>

＆＃13;

<form id='generic_form'>
<div class='category'>
<table class='cat_head'>
<tr>
<td><h2 style='text-align:center'>Introduce Yourself</h2></td>
</tr>
</table>
</div>

<table>
<tr>
<td> </td>
</tr>
</table>

<table id='form_spec'>
<tr>
<th colspan='2'><h2>Please completely fill out all the requested information below with honesty:</h2></th>
</tr>
<tr>
<td>Name:</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>Nickname:</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select>
<option>Male</option>
<option>Female</option>
<option>Unknown</option>
</select>
</td>
</tr>
<tr><td>Birthday:</td>
<td>
<select>
<option>N/A</option>
<option>January 1st</option>
<option>February 1st</option>
<option>March 1st</option>
<option>April 1st</option>
<option>May 1st</option>
<option>June 1st</option>   
<option>July 1st</option>
<option>August 1st</option>
<option>September 1st</option>
<option>October 1st</option>
<option>November 1st</option>
<option>December 1st</option>
</select>
</td>
</tr>
<tr>
<td colspan='2' id='send_form'><button type='submit'>Submit</button></td>
</tr>
</table>
</form>

＆＃13;

Answer 1

显而易见的想法是，你可能误解了通过不为每个部分（日，月，年）使用一个来设置选择的事情。除非我误解了你的想法。

HTML将是：

<select id="day" name="day">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">4</option>
  <option value="4">4</option>
  etc.. until 31.
</select>

<select id="month" name="month">
  <option value="January">January</option>
  <option value="February">February</option>
  etc.. until December
</select>

<select id="year" name="year">
  <option value="1940">1940</option>
  <option value="1941">1941</option>
  <option value="1942">1942</option>
  <option value="1943">1943</option>
  <option value="1944">1944</option>
  etc.. up til year 2017 (or what is max)
</select>

和javascript：

var day = document.getElementById('day').value ;
var month = document.getElementById('month').value ;
var year = document.getElementById('year').value ;

有些人喜欢数月作为数字然后你会这样做：

<select id="month" name="month">
  <option value="1">January</option>
  <option value="2>February</option>
  etc.. until December
</select>

Answer 2

我强烈建议在此实例中使用jQuery Datepicker。原因是，这个问题有一个HTML答案，不幸的是......并非所有浏览器都支持它。那是：<input type="date">参数。如果这在全球范围内有效，那将是最容易的事情。

因为它不是，所以仍然使用JavaScript / jQuery是一个安全的选择，特别是对于向后兼容性。我喜欢jQuery Datepicker，因为它易于使用。在<head>

中调用几个依赖项

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

执行此jQuery：

  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  });
  </script>

并在输入字段中添加＆＃34; datepicker＆＃34;：

的ID

<input type="text" id="datepicker">

LINK TO JSFIDDLE

你有它。我认为一个非常轻量级的代码会产生你想要的结果。

如何在可提交的表单上正确创建和制作生日字段？

2 个答案: