diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index e28936b850d..16a4ba908a7 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -82,7 +82,7 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView#
         _.each(this.widgets, function(w) {
             w.start();
         });
-        this.$form_header = this.$element.find('#' + this.element_id + '_header');
+        this.$form_header = this.$element.find('.oe_form_header');
         this.$form_header.find('div.oe_form_pager button[data-pager-action]').click(function() {
             var action = $(this).data('pager-action');
             self.on_pager_action(action);
@@ -196,7 +196,7 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView#
         }
     },
     do_update_pager: function(hide_index) {
-        var $pager = this.$element.find('#' + this.element_id + '_header div.oe_form_pager');
+        var $pager = this.$form_header.find('div.oe_form_pager');
         var index = hide_index ? '-' : this.dataset.index + 1;
         $pager.find('span.oe_pager_index').html(index);
         $pager.find('span.oe_pager_count').html(this.dataset.ids.length);
@@ -619,6 +619,7 @@ openerp.web.form.compute_domain = function(expr, fields) {
 
 openerp.web.form.Widget = openerp.web.Widget.extend(/** @lends openerp.web.form.Widget# */{
     template: 'Widget',
+    identifier_prefix: 'formview-widget-',
     /**
      * @constructs openerp.web.form.Widget
      * @extends openerp.web.Widget
@@ -632,11 +633,13 @@ openerp.web.form.Widget = openerp.web.Widget.extend(/** @lends openerp.web.form.
         this.modifiers = JSON.parse(this.node.attrs.modifiers || '{}');
         this.type = this.type || node.tag;
         this.element_name = this.element_name || this.type;
-        this.element_id = [this.view.element_id, this.element_name, this.view.widgets_counter++].join("_");
+        this.element_class = [
+            'formview', this.view.view_id, this.element_name,
+            this.view.widgets_counter++].join("_");
 
-        this._super(view, this.element_id);
+        this._super(view);
 
-        this.view.widgets[this.element_id] = this;
+        this.view.widgets[this.element_class] = this;
         this.children = node.children;
         this.colspan = parseInt(node.attrs.colspan || 1, 10);
         this.decrease_max_width = 0;
@@ -649,7 +652,7 @@ openerp.web.form.Widget = openerp.web.Widget.extend(/** @lends openerp.web.form.
         this.width = this.node.attrs.width;
     },
     start: function() {
-        this.$element = $('#' + this.element_id);
+        this.$element = this.view.$element.find('.' + this.element_class);
     },
     stop: function() {
         if (this.$element) {
@@ -896,7 +899,7 @@ openerp.web.form.WidgetLabel = openerp.web.form.Widget.extend({
         var self = this;
         this.$element.find("label").dblclick(function() {
             var widget = self['for'] || self;
-            console.log(widget.element_id , widget);
+            console.log(widget.element_class , widget);
             window.w = widget;
         });
     }
@@ -1932,9 +1935,8 @@ openerp.web.form.FieldOne2Many = openerp.web.form.Field.extend({
     },
     validate: function() {
         this.invalid = false;
-        var self = this;
-        var view = self.viewmanager.views[self.viewmanager.active_view].controller;
-        if (self.viewmanager.active_view === "form") {
+        var view = this.viewmanager.views[this.viewmanager.active_view].controller;
+        if (this.viewmanager.active_view === "form") {
             for (var f in view.fields) {
                 f = view.fields[f];
                 if (!f.is_valid()) {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index c2b6ca0bdf2..daf85c43ee7 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -649,7 +649,7 @@
     <t t-raw="frame.render()"/>
 </t>
 <t t-name="FormView">
-    <div class="oe_form_header" t-att-id="view.element_id + '_header'">
+    <div class="oe_form_header">
         <div class="oe_form_buttons" t-if="view.options.action_buttons !== false">
             <!--<button type="button" class="oe_form_button_save">
                 <span class="oe_form_on_update">Save</span>
@@ -721,8 +721,7 @@
                 t-att-width="td.width"
                 t-att-nowrap="td.nowrap or td.is_field_m2o? 'true' : undefined"
                 t-att-valign="td.table ? 'top' : undefined"
-                t-att-id="td.element_id"
-                t-attf-class="oe_form_frame_cell #{td.classname}"
+                t-attf-class="oe_form_frame_cell #{td.classname} #{td.element_class}"
             >
                 <t t-raw="td.render()"/>
             </td>
@@ -753,7 +752,7 @@
     </div>
 </t>
 <t t-name="WidgetLabel">
-    <label t-att-for="widget.element_id + '_field'"
+    <label t-att-for="widget.element_id"
            t-att-class="'oe_label' + (widget.help ? '_help' : '')"
            t-att-title="widget.help">
         <t t-esc="widget.string"/>
@@ -767,8 +766,8 @@
 <t t-name="FieldChar">
     <input type="text" size="1"
         t-att-name="widget.name"
-        t-att-id="widget.element_id + '_field'"
-        t-att-class="'field_' + widget.type"
+        t-att-id="widget.element_id"
+        t-attf-class="field_#{widget.type} #{widget.element_class}"
         t-attf-style="width: #{widget.field.translate ? '99' : '100'}%"
     />
     <img class="oe_field_translate" t-if="widget.field.translate" src="/web/static/src/img/icons/terp-translate.png" width="16" height="16" border="0"/>
@@ -804,8 +803,8 @@
 <t t-name="FieldText">
     <textarea rows="6"
         t-att-name="widget.name"
-        t-att-id="widget.element_id + '_field'"
-        t-att-class="'field_' + widget.type"
+        t-att-id="widget.element_id"
+        t-attf-class="field_#{widget.type} #{widget.element_class}"
         t-attf-style="width: #{widget.field.translate ? '99' : '100'}%"
     ></textarea>
     <img class="oe_field_translate" t-if="widget.field.translate" src="/web/static/src/img/icons/terp-translate.png" width="16" height="16" border="0"/>
@@ -823,7 +822,7 @@
     <select
         t-att-name="widget.name"
         t-att-id="widget.element_id + '_field'"
-        t-att-class="'field_' + widget.type"
+        t-attf-class="field_#{widget.type} #{widget.element_class}"
         style="width: 100%">
             <t t-foreach="widget.values" t-as="option">
                 <option><t t-esc="option[1]"/></option>
@@ -831,9 +830,9 @@
     </select>
 </t>
 <t t-name="FieldMany2One">
-    <div t-att-id="widget.element_id" class="oe-m2o">
-        <input t-att-id="widget.element_id + '_input'" type="text" size="1" style="width: 100%;"/>
-        <span class="oe-m2o-drop-down-button" t-att-id="widget.element_id + '_drop_down'">
+    <div t-att-class="widget.element_class" class="oe-m2o">
+        <input type="text" size="1" style="width: 100%;"/>
+        <span class="oe-m2o-drop-down-button">
             <img src="/web/static/src/img/down-arrow.png" /></span>
         <span class="oe-m2o-cm-button" t-att-id="widget.name + '_open'">
             <img src="/web/static/src/img/icons/gtk-index.png"/></span>
@@ -856,7 +855,7 @@
     </ul>
 </t>
 <t t-name="FieldOne2Many">
-    <div t-att-id="widget.element_id">
+    <div t-att-class="widget.element_class">
     </div>
 </t>
 <t t-name="FieldMany2Many">
@@ -865,10 +864,10 @@
 <t t-name="FieldReference">
     <table border="0" width="100%" cellpadding="0" cellspacing="0" class="oe_frame oe_forms">
     <tr>
-        <td t-att-id="widget.selection.element_id" class="oe_form_frame_cell oe_form_selection">
+        <td t-attf-class="oe_form_frame_cell oe_form_selection #{widget.selection.element_class}">
             <t t-raw="widget.selection.render()"/>
         </td>
-        <td t-att-id="widget.m2o.element_id" class="oe_form_frame_cell oe_form_many2one" nowrap="true">
+        <td class="oe_form_frame_cell oe_form_many2one #{widget.selection.element_class}" nowrap="true">
             <t t-raw="widget.m2o.render()"/>
         </td>
     </tr>
@@ -878,7 +877,7 @@
     <input type="checkbox"
         t-att-name="widget.name"
         t-att-id="widget.element_id + '_field'"
-        t-att-class="'field_' + widget.type"/>
+        t-attf-class="field_#{widget.type} #{widget.element_class}"/>
 </t>
 <t t-name="FieldProgressBar">
     <div t-opentag="true" class="oe-progressbar">
@@ -893,7 +892,7 @@
                 t-att-border="widget.readonly ? 0 : 1"
                 t-att-id="widget.element_id + '_field'"
                 t-att-name="widget.name"
-                t-att-class="'field_' + widget.type"
+                t-attf-class="field_#{widget.type} #{widget.element_class}"
                 t-att-width="widget.node.attrs.img_width || widget.node.attrs.width"
                 t-att-height="widget.node.attrs.img_height || widget.node.attrs.height"
             />
@@ -941,7 +940,7 @@
             <input type="text" size="1"
                 t-att-name="widget.name"
                 t-att-id="widget.element_id + '_field'"
-                t-att-class="'field_' + widget.type" style="width: 100%"
+                t-attf-class="field_#{widget.type} #{widget.element_class}" style="width: 100%"
             />
         </td>
         <td class="oe-binary" nowrap="true">
@@ -986,7 +985,7 @@
 </t>
 <t t-name="WidgetButton">
     <button type="button"
-        t-att-id="widget.element_id + '_button'"
+        t-attf-class="#{widget.element_class}"
         t-att-title="widget.help"
         style="width: 100%" class="button">
         <img t-if="widget.node.attrs.icon" t-att-src="'/web/static/src/img/icons/' + widget.node.attrs.icon + '.png'" width="16" height="16"/>