Creating links and forms

To create a link (<a>), use the Eliom_content.​Html5.​D.​a function, as in these examples:

open Eliom_content

 let links = Eliom_registration.Html5.register_service ["rep";"links"] Eliom_parameter.unit
 (fun () () ->
   Lwt.return
    Html5.D.(
      html
       (head (title (pcdata "Links")) [])
       (body
         [p
          [a coucou [pcdata "coucou"] (); br ();
           a hello [pcdata "hello"] (); br ();
           a default
             [pcdata "default page of the dir"] (); br ();
           a uasuffix
             [pcdata "uasuffix"] (2007,6); br ();
           a coucou_params
             [pcdata "coucou_params"] (42,(22,"ciao")); br ();
           a raw_serv
             [pcdata "raw_serv"] [("sun","yellow");("sea","blue and pink")]; br ();
           a
             (Eliom_service.Http.external_service
                ~prefix:"http://fr.wikipedia.org"
                ~path:["wiki";""]
                ~get_params:(suffix (all_suffix "suff"))
                ())
             [pcdata "OCaml on wikipedia"]
             ["OCaml"]; br ();
           Raw.a
             ~a:[a_href (Raw.uri_of_string "http://en.wikipedia.org/wiki/OCaml")]
             [pcdata "OCaml on wikipedia"]
         ]])))

See http://tests.ocsigen.org/rep/links.

Eliom_content.​Html5.​D.​a takes as first parameter the service you want to link to. The third parameter is the text of the link. The last parameter is for GET parameters you want to put in the link. The type of this parameter and the name of GET parameters depend on the service you link to.

The links to Wikipedia shows how to define an external service (here it uses a suffix URL). For an external service without parameters, you can use the low level function Eliom_content.​Html5.​D.​Raw.​a, if you don't want to create an external service explicitly. Note that the path must be a list of strings: do not write ["foo/bar"], but ["foo";"bar"], otherwise, the "/" will be encoded in the URL.

If you want to create (mutually or not) recursive pages, create the service using Eliom_service.​App.​service or Eliom_service.​Http.​service first, then register it in the table using (for example) Eliom_registration.​Html5.​register:

let linkrec = Eliom_service.Http.service ["linkrec"] Eliom_parameter.unit ()

let _ = Eliom_registration.Html5.register linkrec
    (fun () () ->
      Lwt.return
       (html
        (head (title (pcdata "")) [])
        (body [p [a linkrec [pcdata "click"] ()]])))

Seehttp://tests.ocsigen.org./linkrec.

(But you can also refer to the current service as Eliom_service.​void_coservice'.)

Forms

Forms towards GET services

The function Eliom_content.​Html5.​D.​get_form allows creation of forms that use the GET method (parameters in the URL). It works like Eliom_content.​Html5.​D.​a but takes a function that creates the form from the parameters names as parameter.

let create_form =
  (fun (number_name, (number2_name, string_name)) ->
    Html5.D.(
      [p [pcdata "Write an int: ";
        int_input ~input_type:`Text ~name:number_name ();
        pcdata "Write another int: ";
        int_input ~input_type:`Text ~name:number2_name ();
        pcdata "Write a string: ";
        string_input ~input_type:`Text ~name:string_name ();
        string_input ~input_type:`Submit ~value:"Click" ()]]
    ))

let form = Eliom_registration.Html5.register_service ["form"] unit
  (fun () () ->
     let f = Html5.D.get_form coucou_params create_form in
     Lwt.return
       (html
         (head (title (pcdata "")) [])
         (body [f])))

See http://tests.ocsigen.org/form to see the function form>> in action]].

If you want to use typed parameters, you cannot use functions like Html5.​M.​input to create your forms (but you can use it if you want to use parameters defined with Eliom_parameter.​any). Indeed, parameter names are typed to force them be used properly. In our example, number_name has type int param_name and must be used with int_input (or other widgets), whereas string_name has type string param_name and must be used with string_input (or other widgets). All functions for creating form widgets are detailed in Eliom_content.​Html5.​D (and Eliom_content.​Html5.​D).

For untyped forms, you may use functions from Html5.​M or functions from the module Eliom_content.​Html5.​D.​Raw. Here is a form linking to our (untyped) service raw_serv.

let raw_form =
  Eliom_registration.Html5.register_service
    ~path:["anyform"]
    ~get_params:Eliom_parameter.unit
    (fun () () ->
      Lwt.return
        Html5.D.(html
                   (head (title (pcdata "")) [])
                   (body
                      [h1 [pcdata "Any Form"];
                       get_form raw_serv
                         (fun () ->
                           [p [pcdata "Form to raw_serv: ";
                               raw_input ~input_type:`Text ~name:"plop" ();
                               raw_input ~input_type:`Text ~name:"plip" ();
                               raw_input ~input_type:`Text ~name:"plap" ();
                               raw_input ~input_type:`Submit ~value:"Click" ()]])
                        ])))

Try this form. >>

POST parameters

By default web page parameters are transferred in the URL (GET parameters). A web page may also expect POST parameters (that is, parameters that are not in the URL but in the body of the HTTP request, if the POST method is used).

let no_post_param_service =
  Eliom_registration.Html5.register_service
    ~path:["post"]
    ~get_params:Eliom_parameter.unit
    (fun () () ->
      Lwt.return
        (html
         (head (title (pcdata "")) [])
         (body [h1 [pcdata
                      "Version of the page without POST parameters"]])))

let my_service_with_post_params =
  Eliom_registration.Html5.register_post_service
    ~fallback:no_post_param_service
    ~post_params:Eliom_parameter.(string "value")
    (fun () value ->
      Lwt.return
        (html
         (head (title (pcdata "")) [])
         (body [h1 [pcdata value]])))

Services may take both GET and POST parameters:

let get_no_post_param_service =
  Eliom_registration.Html5.register_service
    ~path:["post2"]
    ~get_params:Eliom_parameter.(int "i")
    (fun i () ->
      Lwt.return
        (html
         (head (title (pcdata "")) [])
         (body [p [pcdata "No POST parameter, i:";
                   em [pcdata (string_of_int i)]]])))

let my_service_with_get_and_post = Eliom_registration.Html5.register_post_service
  ~fallback:get_no_post_param_service
  ~post_params:Eliom_parameter.(string "value")
  (fun i value ->
    Lwt.return
      (html
         (head (title (pcdata "")) [])
         (body [p [pcdata "Value: ";
                   em [pcdata value];
                   pcdata ", i: ";
                   em [pcdata (string_of_int i)]]])))

POST forms

To create a POST form, use the Eliom_content.​Html5.​D.​post_form function. It is similar to Eliom_content.​Html5.​D.​get_form with an additional parameter for the GET parameters you want to put in the URL (if any). Here, form2 is a page containing a form to the service post (using Html5.F's functions) and form3 (defined using the syntax extension) contains a form to post2, with a GET parameter. form4 is a form to an external page.

let form2 = Eliom_registration.Html5.register_service ["form2"] Eliom_parameter.unit
  (fun () () ->
     let f =
       (Eliom_content.Html5.D.post_form my_service_with_post_params
          (fun chaine ->
            [p [pcdata "Write a string: ";
                string_input ~input_type:`Text ~name:chaine ()]]) ()) in
     Lwt.return
       (html
         (head (title (pcdata "form")) [])
         (body [f])))

let form3 = Eliom_registration.Html5.register_service ["form3"] Eliom_parameter.unit
  (fun () () ->
     let module Html5 = Html5.D in
     let f  =
       (Eliom_content.Html5.D.post_form my_service_with_get_and_post
          (fun chaine ->
            <:html5list< <p> Write a string:
                    $string_input ~input_type:`Text ~name:chaine ()$ </p> >>)
          222) in
     Lwt.return
       << <html>
            <head><title></title></head>
            <body>$f$</body></html> >>)

let form4 = Eliom_registration.Html5.register_service ["form4"] Eliom_parameter.unit
  (fun () () ->
     let module Html5 = Eliom_content.Html5.D in
     let f  =
       (Eliom_content.Html5.D.post_form
          (external_post_service
             ~prefix:"http://www.petizomverts.com"
             ~path:["zebulon"]
             ~get_params:(int "i")
             ~post_params:(string "chaine") ())
          (fun chaine ->
            <:html5list< <p> Write a string:
                     $string_input ~input_type:`Text ~name:chaine ()$ </p> >>)
          222) in
     Lwt.return
       (html
        (head (title (pcdata "form")) [])
        (body [f])))

See the urls: post without parameter, post2 without POST parameter, form2, form3, form4.

Advanced forms and parameters

This section shows more advanced use of page parameters and corresponding forms.

Parsing parameters using regular expressions

Eliom_parameter.regexp allows parsing page parameters using (Perl-compatible) regular expressions. We use the module Netstring_pcre, from OCamlnet. See the documentation about OCamlnet for more information. The following example shows a service that accepts only parameters values enclosed between [ and ]:

let r = Netstring_pcre.regexp "\\\\[(.*)\\\\]"

let regexp =
  Eliom_registration.Html5.register_service
    ~path:["regexp"]
    ~get_params:Eliom_parameter.(regexp r "$1" (fun s -> s) "myparam")
    (fun g () ->
      Lwt.return
        Html5.D.(html
                  (head (title (pcdata "")) [])
                  (body [p [pcdata g]])))
let myregexp = Netstring_pcre.regexp "\\[(.*)\\]"

let regexpserv =
  Eliom_registration.Html5.register_service
    ~path:["regexp"]
    ~get_params:Eliom_parameter.(regexp myregexp "$1" (fun s -> s) "myparam")
    (fun g () ->
      Lwt.return
        Html5.D.(html
                  (head (title (pcdata "")) [])
                  (body [p [pcdata g]])))

Try it.

Boolean checkboxes

Page may take parameter of type bool. A possible use of this type is in a form with boolean checkboxes, as in the example below:

(* Form with bool checkbox: *)
let bool_params = Eliom_registration.Html5.register_service
    ~path:["bool"]
    ~get_params:Eliom_parameter.(bool "case")
  (fun case () ->
    let module Html5 = Html5.D in
    Lwt.return
      << <html>