获取文本框名称和内联文本框
Getting text box names and text boxes inline
以下是我用来制作 html 表格的代码！目前文本框名称和文本框是一个接一个的。
例如：NIC 及其文本框不是内联的。
如果我对一对元素使用两个 <td> 标签，尽管它们变成内联时它们相距很远！我该如何解决这个问题？
<html>
<head>
<style>input.textfill {
float: right;
}</style>
</head>
<body bgcolor="#E6E6FA">
<form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return Validate(this);">
<table align="Center" >
<tr><td height="40"><br>
<div class="headingbox" id="hBoxNIC" > National ID </div>
<div style="width:100%;text-align:center;">
<input type="text" placeholder="920290505v" maxlength="13" name=NIC required autofocus />
</div>
</td></tr>
<tr><td height=50 ><div class="headingboxs">Pick up</div>
<input type=radio name=DP required value="Pickup">
<div style=" float: right;"><div class="headingboxs">
Delivery</div>
<input class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" /></div><br><br></td></tr>
<tr><td height="50"><div class="headingbox" >Expected Time </div>
<div style="width:100%;text-align:center;">
<input type="time" id=time autofocus name=DPTime onfocusout="hid('timeerror2');" onfocus="show('timeerror2');"min="09:00:00" max="22:00:00" /><br>
</div>
<div class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM </div>
<script>
var input = document.getElementById('time');
function validateTime (element) {
var minTime = element.min;
var maxTime = element.max
var value = element.value + ':00'
if(minTime > value || value > maxTime) {
console.log("Time is outside of min/max.");
}
}
</script>
</td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxPN"> Phone Number </div>
<div style="width:100%;text-align:center;">
<input type="text" maxlength=10; autofocus name=Tele /><br>
</div>
<div class="error" id="phoneerror" > error occured </div><br></td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxEM"> E-mail </div>
<div style="width:100%;text-align:center;">
<input type="text" autofocus name=Email placeholder="xxx@gmail.com" /><br>
</div>
<div class="error" id="emailerror" > error occured </div><br>
</td></tr>
<tr>
<td height="50" width=330><br><div class="headingbox"> Prescription Copy-1</div> <div id="kids">
<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />
<label class="fileUpload">
<input id="uploadBtn" type="file" class="upload" name=Image1 />
<span class="uploadBtn">Upload</span>
</label>
<input type="button" id="add" onclick="addkid()" value="+" />
</div></td></tr>
<script>
document.getElementById("uploadBtn" ).onchange = function() {
document.getElementById("uploadFile").value = this.value;
};
</script>
</div></td></tr>
<tr><td colspan=5 align=center>
<input class="button" type=submit name=submit value=Place >
<input class="button" type=reset name=reset value=Cancel> </td></tr>
</table>
</form>
</body>
</html>
我想 this 就是您要找的。我基本上用 span 标签替换了所有 div 标签。 span 元素自然会内联，而 div 会尝试向下移动到下一行。
var input = document.getElementById('time');
function validateTime(element) {
var minTime = element.min;
var maxTime = element.max
var value = element.value + ':00'
if (minTime > value || value > maxTime) {
console.log("Time is outside of min/max.");
}
}
document.getElementById("uploadBtn").onchange = function() {
document.getElementById("uploadFile").value = this.value;
};
input.textfill {
float: right;
}
<body bgcolor="#E6E6FA">
<form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return Validate(this);">
<table align="">
<tr>
<td height="40">
<br>
<span class="headingbox" id="hBoxNIC"> National ID </span>
<span style="width:100%;text-align:center;">
<input type="text" placeholder="920290505v" maxlength="13" name=NIC required autofocus />
</span>
</td>
</tr>
<tr>
<td height=50>
<span class="headingboxs">Pick up</span>
<input type=radio name=DP required value="Pickup">
<span style=" float: right;">
<span class="headingboxs">
Delivery</span>
<input class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" />
</span>
<br>
<br>
</td>
</tr>
<tr>
<td height="50">
<span class="headingbox">Expected Time </span>
<span style="width:100%;text-align:center;">
<input type="time" id=time autofocus name=DPTime onfocusout="hid('timeerror2');" onfocus="show('timeerror2');" min="09:00:00" max="22:00:00" />
<br>
</span>
<span class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM </span>
</td>
</tr>
<tr>
<td height="50">
<span class="headingbox" id="hBoxPN"> Phone Number </span>
<span style="width:100%;text-align:center;">
<input type="text" maxlength=10; autofocus name=Tele />
<br>
</span>
<span class="error" id="phoneerror"> error occured </span>
<br>
</td>
</tr>
<tr>
<td height="50">
<span class="headingbox" id="hBoxEM"> E-mail </span>
<span style="width:100%;text-align:center;">
<input type="text" autofocus name=Email placeholder="xxx@gmail.com" />
<br>
</span>
<span class="error" id="emailerror"> error occured </span>
<br>
</td>
</tr>
<tr>
<td height="50" width=330>
<br>
<span class="headingbox"> Prescription Copy-1</span>
<span id="kids">
<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />
<label class="fileUpload">
<input id="uploadBtn" type="file" class="upload" name=Image1 />
<span class="uploadBtn">Upload</span>
</label>
<input type="button" id="add" onclick="addkid()" value="+" />
</span>
</td>
</tr>
<tr>
<td colspan=5 align=center>
<input class="button" type=submit name=submit value=Place>
<input class="button" type=reset name=reset value=Cancel>
</td>
</tr>
</table>
</form>
</body>
以下是我用来制作 html 表格的代码！目前文本框名称和文本框是一个接一个的。 例如：NIC 及其文本框不是内联的。
如果我对一对元素使用两个 <td> 标签，尽管它们变成内联时它们相距很远！我该如何解决这个问题？
<html>
<head>
<style>input.textfill {
float: right;
}</style>
</head>
<body bgcolor="#E6E6FA">
<form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return Validate(this);">
<table align="Center" >
<tr><td height="40"><br>
<div class="headingbox" id="hBoxNIC" > National ID </div>
<div style="width:100%;text-align:center;">
<input type="text" placeholder="920290505v" maxlength="13" name=NIC required autofocus />
</div>
</td></tr>
<tr><td height=50 ><div class="headingboxs">Pick up</div>
<input type=radio name=DP required value="Pickup">
<div style=" float: right;"><div class="headingboxs">
Delivery</div>
<input class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" /></div><br><br></td></tr>
<tr><td height="50"><div class="headingbox" >Expected Time </div>
<div style="width:100%;text-align:center;">
<input type="time" id=time autofocus name=DPTime onfocusout="hid('timeerror2');" onfocus="show('timeerror2');"min="09:00:00" max="22:00:00" /><br>
</div>
<div class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM </div>
<script>
var input = document.getElementById('time');
function validateTime (element) {
var minTime = element.min;
var maxTime = element.max
var value = element.value + ':00'
if(minTime > value || value > maxTime) {
console.log("Time is outside of min/max.");
}
}
</script>
</td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxPN"> Phone Number </div>
<div style="width:100%;text-align:center;">
<input type="text" maxlength=10; autofocus name=Tele /><br>
</div>
<div class="error" id="phoneerror" > error occured </div><br></td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxEM"> E-mail </div>
<div style="width:100%;text-align:center;">
<input type="text" autofocus name=Email placeholder="xxx@gmail.com" /><br>
</div>
<div class="error" id="emailerror" > error occured </div><br>
</td></tr>
<tr>
<td height="50" width=330><br><div class="headingbox"> Prescription Copy-1</div> <div id="kids">
<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />
<label class="fileUpload">
<input id="uploadBtn" type="file" class="upload" name=Image1 />
<span class="uploadBtn">Upload</span>
</label>
<input type="button" id="add" onclick="addkid()" value="+" />
</div></td></tr>
<script>
document.getElementById("uploadBtn" ).onchange = function() {
document.getElementById("uploadFile").value = this.value;
};
</script>
</div></td></tr>
<tr><td colspan=5 align=center>
<input class="button" type=submit name=submit value=Place >
<input class="button" type=reset name=reset value=Cancel> </td></tr>
</table>
</form>
</body>
</html>
我想 this 就是您要找的。我基本上用 span 标签替换了所有 div 标签。 span 元素自然会内联，而 div 会尝试向下移动到下一行。
var input = document.getElementById('time');
function validateTime(element) {
var minTime = element.min;
var maxTime = element.max
var value = element.value + ':00'
if (minTime > value || value > maxTime) {
console.log("Time is outside of min/max.");
}
}
document.getElementById("uploadBtn").onchange = function() {
document.getElementById("uploadFile").value = this.value;
};
input.textfill {
float: right;
}
<body bgcolor="#E6E6FA">
<form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return Validate(this);">
<table align="">
<tr>
<td height="40">
<br>
<span class="headingbox" id="hBoxNIC"> National ID </span>
<span style="width:100%;text-align:center;">
<input type="text" placeholder="920290505v" maxlength="13" name=NIC required autofocus />
</span>
</td>
</tr>
<tr>
<td height=50>
<span class="headingboxs">Pick up</span>
<input type=radio name=DP required value="Pickup">
<span style=" float: right;">
<span class="headingboxs">
Delivery</span>
<input class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" />
</span>
<br>
<br>
</td>
</tr>
<tr>
<td height="50">
<span class="headingbox">Expected Time </span>
<span style="width:100%;text-align:center;">
<input type="time" id=time autofocus name=DPTime onfocusout="hid('timeerror2');" onfocus="show('timeerror2');" min="09:00:00" max="22:00:00" />
<br>
</span>
<span class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM </span>
</td>
</tr>
<tr>
<td height="50">
<span class="headingbox" id="hBoxPN"> Phone Number </span>
<span style="width:100%;text-align:center;">
<input type="text" maxlength=10; autofocus name=Tele />
<br>
</span>
<span class="error" id="phoneerror"> error occured </span>
<br>
</td>
</tr>
<tr>
<td height="50">
<span class="headingbox" id="hBoxEM"> E-mail </span>
<span style="width:100%;text-align:center;">
<input type="text" autofocus name=Email placeholder="xxx@gmail.com" />
<br>
</span>
<span class="error" id="emailerror"> error occured </span>
<br>
</td>
</tr>
<tr>
<td height="50" width=330>
<br>
<span class="headingbox"> Prescription Copy-1</span>
<span id="kids">
<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />
<label class="fileUpload">
<input id="uploadBtn" type="file" class="upload" name=Image1 />
<span class="uploadBtn">Upload</span>
</label>
<input type="button" id="add" onclick="addkid()" value="+" />
</span>
</td>
</tr>
<tr>
<td colspan=5 align=center>
<input class="button" type=submit name=submit value=Place>
<input class="button" type=reset name=reset value=Cancel>
</td>
</tr>
</table>
</form>
</body>