CODEWITHSUNDEEP
javascriptjquerycss
Rudraksh manshani
Rudraksh manshani

Reputation: 21

CSS and JS Query

I am trying to make an HTML form, and I am trying to insert the "Plus" icon to the Input field. How would I do that, since I've already tried modifying it via CSS? Can someone help?

Also, I also want to create a "click" event which leads me to a secondary page where I can choose the Rooms and the capacity in my form, and go back once I am done with it. Any thoughts how I would do that?

This is my CSS Code:

*{
        margin:0;
        box-sizing: border-box;
        padding:0px;
}

body{
        height:100vh;
        display: flex;
        background-color: rgb(87,189,130);
}

.field-property,
.field-room,
.field-name-room,
.field-capacity,
.base-tariff{
        position: relative;
        top:30%;
        left:100%;
}

.allinputs{
        margin:10px;
        padding:5px;
        border-radius: 10px;
        width:100%;
}

.client-form{
        align-items: center;
        justify-content: center;
        display: flex;
}

This is my HTML Code:
<body>
       <h1 class="client-form">Client Integration Form</h1>
               <form>
        <div class="field-property">
        <label for="property Name">Property Name
       <input type="text" class= "allinputs" name="name" placeholder="Property Name" required />
       </label>
       </div>
                <div class="field-room">
            <label for="rooms">Rooms
           <input type="text" class="allinputs" name="name" placeholder="Rooms" required />
           <div class="material-icon">
           <i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>
           </label>
           </div>
                </div>
           <!-- Adding the Icon for Adding Rooms -->
                <div class="field-name-room">
                  <label for="room Selected">Room Selected
                  <!-- Adding a Drop Down Value for the rooms -->
       <select class="all inputs">
     <option class="options">Pink Room</option>
                          <option class="options">Red Room</option>
                          <option class="options">Green Room</option>
                        </select>
                        </label>
                </div>
                  <div class="field-capacity">
                          <label for="capacity">Capacity</label>
                          <input type="number" class="allinputs">
                  </div>
           <div class="base-tariff">
         <label for="base Tariff">Base Tariff of the Room:</label>
         <input type="value" class="allinputs" name="name" placeholder="Base Tariff">
           </div>
                                  <!-- Yet to be decided how to integrate this -->
                <!-- <div class="field-billing">
                        <label for="billing">Billing:</label>
                </div>
                        <div class="field-phone">
                        <label for="phone Number">Phone Number</label>
                       <input type="number" class="allinputs">
                        </div>
        </form>
</div>
</body>
</html>

Upvotes: 1

Views: 57

Answers (1)

Python Coding Tutorials
Python Coding Tutorials

Reputation: 79

  1. To insert the '+' sign use a placeholder.
    <input type="" id="" name="" placeholder="+">

  2. A click event could be achieved by a simple hyperlink <a href=''>Example Hyperlink</a>

Upvotes: 1

Related Questions