creating simple login form

[praveen kumar]

Hi all,

           How to create a simple login form using haml language? 

Sample:

http://ui-cloud.com/res/designmoo/Clean_Simple_Login_Form/previews/loginform-270x300.jpg  

Thanks,

Praveen RPK

[BeeRich33]

I too am looking for some guidance.  I can't find anything online.  

[Norman Clarke]

It sounds more like you're asking for help with web development in general, rather than Haml. I think the best way to proceed would be to be sure you have the knowledge of how to create a web form that does what you want using normal HTML, and then try replacing the HTML part with Haml. If you get stuck at that point, then feel free to ask questions in the group.

If you want to jump right into Haml, though, the haml.info website has links to resources on how to work with Haml, as well as all of its documentation.

You can also "cheat" a bit when learning Haml by writing some HTML, and then converting it to Haml to see how to translate it:

http://htmltohaml.com/

Regards,

Norman

--
You received this message because you are subscribed to the Google Groups "Haml" group.
To unsubscribe from this group and stop receiving emails from it, send an email to haml+unsubscribe@googlegroups.com.
To post to this group, send email to ha...@googlegroups.com.
Visit this group at http://groups.google.com/group/haml.
For more options, visit https://groups.google.com/d/optout.

[Hampton Catlin]

There is a lot, lot, lot of information about this online.

There are three main things you need in order to make a form like that.

1) A webserver / backend. Without a database, webserver, etc, you can’t store new user registrations or handle “sessions.” A sessions is when your server sets a cookie on the users browser, that let’s the server know that it’s the user who logged in whenever they load a page.

2) HTML. It’s the bones of a webpage and is exactly what Haml is for. However, Haml is not itself something that magically makes forms. The simplified HTML for the form you showed would probably look something like:

<form>

  <label>Username</label>

  <input name=“username” type=“text" />

  <label>Password</label>

  <input name=“password” type=“password />

</form>

However, if you showed that, it would look pretty ugly on the page.

3) CSS. It’s how we color and style pages. Picking the fonts, positioning, and look of the page is mostly done with CSS (and with help from changes to the HTML).

Building a form like you showed is fairly complex and building a custom login form is something a skilled web developer does as their profession. The first step is the most complicated!

If you want to learn more about forms like this, then try online courses in web development or searching for “How to build a simple web application”

Goodluck in your quest!

-hampton.

--

You received this message because you are subscribed to the Google Groups "Haml" group.

To unsubscribe from this group and stop receiving emails from it, send an email to haml+uns...@googlegroups.com.

[BeeRich33]

That's still not HAML.  That's HTML.  

[BeeRich33]

No.  I've been web developing for decades now.  Forms are something I have automated in some time.  I've recently taken up HAML and I can't find any reference to form syntax anywhere.  

I did ask a question in the group.  They pointed me to web development.  

I am specifically looking for any reference to tags that generate forms.  On their website, which I have checked many times, I have found nothing.  

Cheating means going off someone else's insight into tags that I can't find published anywhere.  Second, I've used these tools for various applications and they rarely work well, nor explain what's going on.  

Please note that when people are asking for some guidance on forms using haml, it's just that.  We have both asked for some links to where these tags are published so we can read up on them.  

On Monday, December 8, 2014 11:01:37 AM UTC-5, Norman Clarke wrote:

It sounds more like you're asking for help with web development in general, rather than Haml. I think the best way to proceed would be to be sure you have the knowledge of how to create a web form that does what you want using normal HTML, and then try replacing the HTML part with Haml. If you get stuck at that point, then feel free to ask questions in the group.

If you want to jump right into Haml, though, the haml.info website has links to resources on how to work with Haml, as well as all of its documentation.

You can also "cheat" a bit when learning Haml by writing some HTML, and then converting it to Haml to see how to translate it:

http://htmltohaml.com/

Regards,

Norman

On Mon Dec 08 2014 at 12:53:51 PM BeeRich33 <bee...@gmail.com> wrote:

I too am looking for some guidance.  I can't find anything online.  

On Monday, December 8, 2014 6:42:07 AM UTC-5, praveen kumar wrote:

Hi all,

           How to create a simple login form using haml language? 

Sample:

http://ui-cloud.com/res/designmoo/Clean_Simple_Login_Form/previews/loginform-270x300.jpg  

Thanks,

Praveen RPK

--
You received this message because you are subscribed to the Google Groups "Haml" group.

To unsubscribe from this group and stop receiving emails from it, send an email to haml+uns...@googlegroups.com.

[Norman Clarke]

I'm sorry I perceived your question as coming from a newbie. Given your degree of experience with HTML I guess don't really understand what you're looking for. Perhaps you are thinking that Haml does something different from what it does.

Haml is just a different way to write HTML. There's nothing special about form tags in Haml; the same docs which show you how to write <div> and <p> tags in Haml would apply to writing <form> or <input> tags. For that reason there's no documentation that specifically describe how to work with forms.

As I mentioned earlier, all the docs on Haml can be found on the haml.info site. If you could show me an example of the kind of documentation you'd like to see added we'd be happy to consider it.

Regards,

Norman

z

[BeeRich33]

Specifically I'm looking for a quick reference for form element input.  The more complex elements like textareas, radio buttons and check boxes, pulldowns, multiple pulldowns.  

If there is nothing really different, I'm sure I could figure it out.  I just thought somewhere there would be some quick reference.  I don't trust a lot of translators that I find.  

[Duncan Beevers]

It's just like html.

In html you'd write

<form>

  <label>Username</label>

  <input name=“username” type=“text" />

  <label>Password</label>

  <input name=“password” type=“password />

</form>

In haml you'd write

%form

  %label Username

  %input(name: "username", type: "text")

  %label Password

  %input(name: "password", type: "password")

The translation is straight-forward and mechanistic. The advantages of using haml is that in those attributes spots, you can use real ruby hashes, etc...

Hope this helps!

[BeeRich33]

OK, here's what I grabbed just now.  Quick and dirty.  

I tried some of the translators online and they messed up coming back into HTML.  The suggested translator nested everything, so that was fun.  Then, the pulldowns needed nesting as well, to keep the selections all together in the <select></select> tags.  

Anyway, here's a quick reference in case anybody wants to post it online and keep it valuable.  Or add to it, etc.  

%form#form1{:name => "form1", :id => "form1", :action => "response.rb", :method => "post"}

%fieldset

%label{:for => "name"} Name

%input{:name => "name", :size => "10", :type => "text", :value => "Fred"}%br/

%label{:for => "myRadios"} My Radios

%input{:checked => "", :name => "myRadios", :type => "radio", :value => "red"}Red

%input{:name => "myRadios", :type => "radio", :value => "green"}Green

%input{:name => "myRadios", :type => "radio", :value => "blue"}Blue

%input{:name => "myRadios", :type => "radio", :value => "yellow"}Yellow

%br/

%label{:for => "myBoxes"} My Boxes

%input{:checked => "", :name => "myBoxes", :type => "checkbox", :value => "Canada"}Canada

%input{:name => "myBoxes", :type => "checkbox", :value => "US"}US

%input{:checked => "", :name => "myBoxes", :type => "checkbox", :value => "UK"}UK

%input{:name => "myBoxes", :type => "checkbox", :value => "France"}France

%br/

%label{:for => "myCars"} My Cars

%select{:name => "myCars"}

%option{:value => "volvo"} Volvo

%option{:value => "saab"} Saab

%option{:value => "fiat"} Fiat

%option{:value => "audi"} Audi

%br/

%label{:for => "myTextarea"} My Textarea

%br/

%textarea{:cols => "60", :name => "myTextarea", :rows => "10"}Smart people drink real beer

%br/

%input#form1Submit{:name => "form1Submit", :id => "form1Submit", :type => "submit", :value => "GO"}

Renders:

<form action='response.rb' id='form1_form1' method='post' name='form1'>

  <fieldset>

    <label for='name'>Name</label>

    <input name='name' size='10' type='text' value='Fred'>%br/</input>

    <label for='myRadios'>My Radios</label>

    <input checked='' name='myRadios' type='radio' value='red'>Red</input>

    <input name='myRadios' type='radio' value='green'>Green</input>

    <input name='myRadios' type='radio' value='blue'>Blue</input>

    <input name='myRadios' type='radio' value='yellow'>Yellow</input>

    <br>

    <label for='myBoxes'>My Boxes</label>

    <input checked='' name='myBoxes' type='checkbox' value='Canada'>Canada</input>

    <input name='myBoxes' type='checkbox' value='US'>US</input>

    <input checked='' name='myBoxes' type='checkbox' value='UK'>UK</input>

    <input name='myBoxes' type='checkbox' value='France'>France</input>

    <br>

    <label for='myCars'>My Cars</label>

    <select name='myCars'>

      <option value='volvo'>Volvo</option>

      <option value='saab'>Saab</option>

      <option value='fiat'>Fiat</option>

      <option value='audi'>Audi</option>

    </select>

    <br>

    <label for='myTextarea'>My Textarea</label>

    <br>

    <textarea cols='60' name='myTextarea' rows='10'>Smart people drink real beer</textarea>

    <br>

    <input id='form1Submit_form1Submit' name='form1Submit' type='submit' value='GO'>

  </fieldset>

</form>