CODEWITHSUNDEEP
htmlcss
user2948246
user2948246

Reputation: 77

Using <a href> to link to a form in HTML

Is there a way to link to a form using only HTML/CSS? I am still a beginner in web dev and have not yet started on JavaScript or JQuery. So what I want to do is, 

<div>
   <ul>
     <a href="??" target="_parent">
       <li class="toggle1">Guest</li>
     </a>
     <a href="??">
       <li class="toggle2">Owner</li>
     </a>
  </ul>
</div>

...in the tags in the I want to link to a form which has elements like First name, Last name etc, such that when I click on "Guest" the form for the guest should appear and likewise for "Owner"

Upvotes: 1

Views: 3668

Answers (2)

kabiroberai
kabiroberai

Reputation: 2913

There is! Make the href tags to #guestform and #ownerform. Then, make each form's id attribute those values (guestform and ownerform). This looks like so:

<div>
<ul>
 <a href="#guestform">
   <li class="toggle1">Guest</li>
 </a>
 <a href="#ownerform">
   <li class="toggle2">Owner</li>
 </a>
</ul>
</div>

<form id="guestform">...</form>

<form id="ownerform">...</form>

Then, in the css, do the following:

form {
    display:none;
}

form:target {
    display:block;
}

Hope this helped you!

EDIT: As sdcr said, the a tag should be inside the li, and not the other way around for it to be semantically correct. It should be like this instead

<div>
<ul>
   <li class="toggle1">
    <a href="#guestform">Guest</a>
   </li>
   <li class="toggle2">
    <a href="#ownerform">Owner</a>
   </li>
</ul>
</div>

Upvotes: 2

user3117575
user3117575

Reputation:

I may have misinterpreted your answer based on the lack of information given.

If you don't care who the end user is, and make both forums accessable to them no matter if they're a guest or owner, you'd simply create another HTML document and link to that document (provided that your web server can serves "static" content).

For instance, say you created another file called owner_form.html and somewhere within the body, you had:

<form>
  ...
</form>

From your index.html you could link to owner_form.html via a <a> tag like this:

<a href="owner_form.html">... Contents that will redirect you</a>

(old answer)

No, this is not possible in only HTML and CSS. Not even (securely & validly) with JavaScript.

HTML and CSS don't have the ability to differentiate the client using the page on their own. And JavaScript can't securely do this either.

You should look into server-side programming. This is where the magic would happen for you. You can try many different frameworks / scripting languages that have web-server functionality to them, for instance, some of the popular ones are:

  1. Ruby on Rails
  2. PHP
  3. NodeJS
  4. Django

Upvotes: 0

Related Questions