簡體   English   中英

如何從同一頁面上的 HTML 表單接收結果

[英]How to receive results from an HTML form on same page

我正在為我的一個課程編寫一個項目,本質上是一些 HTML 網頁都在本地文件夾中工作。 其中一個頁面是一個表單,該項目要求我們在各自的字段旁邊顯示表單的結果。 但是,我不確定該怎么做。 代碼大致如下(抱歉我的縮進錯誤)。

<!DOCTYPE html>
<html>
    <head>
        <title>Reservation Form</title>
                    <b>
                <a href=index.html>Home</a>
                <a href=yurts.html>Yurts</a>
                <a href=#>Activities</a>
                <a href=reservations.html>Reservations</a>
            </b>
            <style type="text/css">
                    div{
                            height: 705px;
                            width: 500px;
                            border: 2px solid red;
                            margin: 200px;
                            padding: 10px;
                    }
                    a:link{
                        padding-right 10px;
                        font-size: 18px;
                        color: 2309CA;
                    }
                    a:active{
                        color: #66027C
                    }
            </style>
    </head>
    <body>
        <div>

                <h2>Reservations</h2>
                    <p style="font size: 20px;"><b>Contact Us Today!</b></p>
                <h2>Reservations Form</h2>

        <form>
        <table>
        <tr>
        <td>
  <label for="First-name">First Name:</label></td>
  <td><input type="text" id="First-name" name="First-name"required ></td>
  </tr>
  <tr>
        <td>
  <label for="lname">Last Name:</label></td>
  <td><input type="text" id="lname" name="lname"required ></td>
  </tr>
  <tr rowspan="2">
  <td><b>Address</b></td>
  </tr>
   <tr>
  <td><label>Number & Street:</label></td>
  <td><input type="text" name="Name and Street" required></td>
  </tr>
  <tr>
  <td><label >City:</label></td>
  <td><input type="text"  name="city" required></td>
  </tr>
  <tr>
    <td><label >State:</label></td>
  <td><name="state" required>
<select>
    <option value="Placeholder">Please Select</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
</select>               
</td>
</tr>
<tr>
  <td><label >Zip Code:</label></td>
  <td><input type="Number"  name="city" required></td>

 </tr>
 <tr>
   <td><label >Check-in Date:</label></td>
  <td><input type="date"  name="Check-in" required></td>
  </tr>
  <tr>
    <td><label >Check-out Date:</label></td>
  <td><input type="date"  name="Check-out" required></td>
  </tr>
   <tr>
    <td><label >Number of People:</label></td>
  <td><input type="Number"  name="Number of People" required></td>
  </tr>
  <tr>
   <td> <label >Phone:</label></td>
  <td><input type="text"  name="phone" placeholder="(###)###-####" required>
  <span class="ExampleNumber">(###)###-####</span>
  </td>
  </tr>
  <tr>
    <td><label >E-mail Address:</label></td>
  <td><input type="Email"  name="email" placeholder="name@domain.com" required></td>
  </tr>
  <tr>
   <td> <label >Payment Method:</label></td>
  <td><name="payment" required>
<select>
    <option value="Placeholder">Please Select</option>
    <option value="MC">MasterCard</option>
    <option value="VISA">Visa</option>
    <option value="AMEX">American Express</option>
    <option value="DS">Discover</option>
</td>
  </tr>
  <tr>
    <td><label >Card Number:</label></td>
  <td><input type="Number"  name="cc" required></td>
  </tr>
  <tr>
    <td><label ><b>Special Request:</b></label></td>
  <td ><textarea style="width:130%;height: 300%">Enter your request here</textarea> </td>
  </tr>
  </table>
  <input type="submit" value="Submit">
  <button>Clear</button>
</form>
<p>
Resort<br/>Street Address<br/>State ZIP<br/>Phone<br/><br/>
                <em>Copyright &copy; 2020 Resort<br/>
                <a>example@domain.com</a></em>
</p>
</div>
</body>
</html>

本質上,我希望結果以與輸入方式類似的方式顯示在提交后的同一頁面上。 我對 PHP 或 CSS 也不是太好,如果是的話我可能已經弄明白了。 任何幫助都將不勝感激。

在您的表單中,您必須將 action 屬性指向同一個文件。

然后在同一個文件中,您可以根據輸入的名稱使用 PHP 超級全局 $_POST 打印輸入的值,如下所示:

 <form action ="yourFile.php" method="POST"> <?--All your html here--> <input type="text" name="yourFirstInput"> <?php echo isset($_POST['yourFirstInput']): $_POST['yourFirstInput']; ''? ?> </form>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM