Question

刚开始学习 JavaScript 和 HTML5 获取文凭，我目前在尝试弄清楚如何 对齐方面遇到了一些麻烦表单中的输入，以便对齐以及标签。

还试图避免使用任何 CSS 。

对收到的任何建议或意见表示感谢。

var formStyle=document.getElementById("formStyle");//creates variable and links it to the form
formStyle.style.fontFamily="Arial";//sets font for within the form
formStyle.style.borderStyle = "outset";//gives border that procedes to make the form look 3D
formStyle.style.padding = "10px";//sets padding within form
formStyle.style.width = "350px";//sets form width
formStyle.style.backgroundColor="lightblue";//changes background colour of form

function changeBgd(textField)
{
	textField.style.background="lightgrey";//when text field is selected it will change colour to represent it has been selected by the user
}

function resetBgd(textField)
{
	textField.style.background="";//resets currently selected text field to original colour when deselected
}

function buttonHelp()
{
	window.open("\helpassignment.html");//opens help page in seperate tab
}

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>
4JSB Assignment
</title>
</head>
<body onload="styleBody()">
<div class="container">
<center> <!--aligns form to centre of page-->
<form name="donationform" id="formStyle" onsubmit="validateDonation()"/>
<label id="labels">First Name:</label>
<input id="inputs" type="text" name="firstname" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">Last Name:</label>
<input id="inputs" type="text" name="lastname" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">Email Address:</label>
<input id="inputs" type="email" name="email"  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z].{2,4}$" onfocus="changeBgd(this)" onblur="resetBgd(this)" required /><br/><br/>
<label id="labels">Postcode:</label>
<input id="inputs" type="text" name="postcode" pattern="[0-9]{4}" maxlength="4" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">Donation:</label>
<input id="inputs" type="text" name="donationamount" value="$0" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">Credit Card:</label>
<select id="inputs">
			<option value="0">Visa</option>
			<option value="1">MasterCard</option>
			<option value="2">American Express</option>
			</select><br/><br/>
<label id="labels">Card Number:</label>
<input id="inputs" type="text" name="cardnum" pattern="[0-9]{16}" maxlength="16" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">CCV:</label>
<input id="inputs" type="text" name="ccv" pattern="[0-9]{3}" maxlength="3" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">Expiry Date:</label>
<select id="inputs">
			<option value="0">Select Month</option>
			<option value="1">January</option>
			<option value="2">Feburary</option>
			<option value="3">March</option>
			<option value="4">April</option>
			<option value="5">May</option>
			<option value="6">June</option>
			<option value="7">July</option>
			<option value="8">August</option>
			<option value="9">September</option>
			<option value="10">October</option>
			<option value="11">November</option>
			<option value="12">December</option>
			</select>
			<select id="inputs">
			<option value="0">Select Year</option>
			<option value="1">2017</option>
			<option value="2">2018</option>
			<option value="3">2019</option>
			<option value="4">2020</option>
			<option value="5">2021</option>
			<option value="6">2022</option>
			</select><br/><br/>
<input type="button" onclick="buttonHelp()" value="Help"> <!--provides link to help page-->
<input type="submit" name="submit" value="Submit">
<input type="reset"><!--provides reset button for user to clear form-->
</form>
</center>
</div>
<script src="..\js\assignment.js">
</script>
</body>
</html>

Answer 1

对于每个元素的更改att使用此（使用 javascript （ jquery ））：

da.getMatchHistory(options).then((result) => {
    console.log(result);
}, (errorResponseStatusText) => {
    console.log(errorResponseStatusText);
});

Answer 2

你可以设置一个新的att调用var addButton=document.getElementById("add-button"); addButton.addEventListener('click', addRow, false); function addRow(){ event.preventDefault(); var newData= document.getElementById("inputname").value; var newLevel = document.getElementById("inputlevel").value; console.log("new data "+newData); console.log("new level "+newLevel); var table = document.getElementById("mytable"); var tableLength = (table.rows.length)-1; console.log("table lenght: "+tableLength); var htmltext= "<tr id= 'row"+tableLength+"'> <td id='inputname"+tableLength+"'>"+newData+"</td> \ <td id='inputlevel"+tableLength+"'>"+newLevel+"</td>\ <td><input type='button' id='edit-button"+tableLength+"' value='Edit' class='edit' onclick='editRow("+tableLength+")'> \ <input type='button' id='save-button"+tableLength+"' value='Save' class='save' onclick='saveRow("+tableLength+")'> \ <input type='button' id= 'delete-button"+tableLength+"' value='Delete' class='delete' onclick='deleteRow("+tableLength+")'>\ </td>\ </tr>"; table.insertRow(tableLength).innerHTML=htmltext; }//end addRow使用如下：

<html>

<head>
    <meta charset="UTF-8">

</head>

<body id="body">

    <div id="wrapper">
        <table align='center' cellspacing=1 cellpadding=1 id="mytable" border=1>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Action</th>
                </tr>

            </thead>
            <tbody id="tbody">
              <tr>
                <td><input type="text" id="inputname"></td>

                <td>
                    <select name="levels-list" id="inputlevel">
                    <option value="High" id="option-1">High</option>
                    <option value="Mid" id="option-2">Mid</option>
                    <option value="Low" id="option-3">Low</option>
                    </select>
                </td>

                <td><input type="button" class="add" id="add-button" value="Add"></td>
                </tr>

            </tbody>
        </table>
    </div>
  <!--  <button onclick='display()'> Display</button> -->
    <script src="get-text.js"></script>
</body>

</html>

现在它会有一个名字＆＃39;在现场，当用户点击它时，它就会消失。

是否可以使用JavaScript和HTML5对齐和标记表单中的输入？

2 个答案: