Make a Button into an input field?


#1

I have a page with 6 squares(Are like buttons). I want to make the square clickable and for it to store in a form (Like a radio button). How is this possible?

<div class="tabtext" ng-click="">
    <div class="icon"><i class="ion-plane"></i></div>
    <h3>Vacation</h3>
</div>

css:

.eventForm .scroll-content { background: #e9e9e9; }
.eventForm .eventTab .col div.tabtext { background: #fff; padding: 20px 0 20px; min-height: 160px; text-align: center; }
.eventForm .eventTab .col div.tabtext i { font-size: 60px; color: #1773ba; }
.eventForm .eventTab .col div.tabtext h3 { margin: 25px 0 0 0; padding: 0; font-family: ‘Open Sans’, sans-serif; text-transform: uppercase; color: #515151; font-size: 18px; }
.eventForm .eventTab .col div.tabtext.activated, .eventForm .eventTab .col div.tabtext.active { background: #1773ba; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.eventForm .eventTab .col div.tabtext.activated h3, .eventForm .eventTab .col div.tabtext.activated i, .eventForm .eventTab .col div.tabtext.active h3, .eventForm .eventTab .col div.tabtext.active i { color: #fff; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.eventForm .btnSubmit { margin: 0 !important; }
.eventForm { background: #e9e9e9 }
.eventForm .bar.bar-footer { background: none; border: none; height: 64px; padding: 5px 10px; }
.eventForm .bar.bar-footer div { display: block; padding: 0; width: 100%; }


#2

Give a codepen or jsfidle example. it will be easy to give solution


#4