Search and login/pw bar RRS feed

  • Question

  • Hello all. I have to create a .html homepage for a fake company for one of my classes. None of the hyperlinks need to work as I just need to have a homepage. I have a homepage setup in terms of having a logo, hyperlinks and information. However, there are two things that I need to add to the homepage to complete it and they are a search bar and a login/pw bar on the homepage. I am completely stuck on how to do this and am asking for any help.  

    Thank you.

    Sunday, August 27, 2017 5:40 PM

All replies

  • Ordinarily, we would tell you to do it yourself, and point you to the appropriate learning resources. However, since this seems to be simply a (somewhat silly) makework project ancillary to the main course, and you are not aspiring (or purporting ;-) to be a Web developer, we'll dispense with that in this case.

    OK, before we begin, since you will be working in the possibly unfamiliar environment of code view, save a copy of your currently working page, in case you screw something up and need to start over. BTW, if you want to test this before you put it into your homework page, just create a new, empty HTML5 page and paste these markup blocks between the <body> </body> tags in that page. Then preview in browser to test.

    Now, since you say that "None of the hyperlinks need to work..." you can simply use a form with no "action" attribute, and use HTML5's "placeholder" attribute instead of labels for these fields. If you haven't changed EW's default doctype, you will have created an XHTML page instead of an HTML5 page. That's OK, the markup will still work, but EW will highlight certain portions in yellow and warn that "Empty elements must have an end tag." You can just ignore that; browsers will still recognize the "placeholder" attribute.

    Now, you will have to work in Split View (see tab at bottom left of page) to do this, but it isn't hard. In Split View, click the point in the design view pane where you want to put the Login box. Now, if you look up in the code view pane you will see that the cursor is located in the code where that point in the page is located. Click that cursor to focus the code view pane. Now copy and paste the following markup in that position:

    <form style="border:1px black solid; width:250px;background-color:silver;font-family:Arial, Helvetica, sans-serif; font-weight:bold">
    Registered User Login<br><br>
    <input id="username" class="" name="username" type="text" placeholder="User Name" required style="width:225px" /><br><br>
    <input id="password" class="" name="password" type="password" placeholder="Password" required style="width:225px" /><br><br>
    <input type="submit" value="Submit" style="margin->

    Preview the page in a browser to view the actual form, since EW's design view doesn't support "placeholder".

    OK, now click in design view where you want to put the Search block. Again, click up in code view at the cursor position to focus that pane, then copy and paste the following markup:

    <form style="border:1px black solid; width:375px;background-color:aqua;font-family:Arial, Helvetica, sans-serif; font-weight:bold">
    Search<input id="searchterm" class="" name="searchterm" type="text" placeholder="Please enter search term" required style="width:225px;margin-left:10px" /><input type="submit" value="Submit" style="display:inline-block;margin-left:10px">

    That will put a search bar at that position. Be aware, of course, that if you click "Submit" nothing will happen. But, according to your criteria, nothing has to actually happen; it just has to look as if it would, and this will answer your question.  ;-)


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Sunday, August 27, 2017 7:53 PM
    Sunday, August 27, 2017 7:16 PM