javascript – Gutenberg richtext block vaildation failed

I have a problem with understanding richtext elements. I am trying to create form with customizable placeholder and label, but when I save and refresh page i get this error:

blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3 Block validation: Block validation failed for `kathy/contact-form` ({name: "kathy/contact-form", icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<form class="wp-block-kathy-contact-form kathyContactForm"><label class="kathyContactFormEmailLabel flexCenterCenter"><span class="kathyContactFormEmailLabelText flexCenterCenter">x</span><input class="kathyContactFormEmail flexCenterCenter" placeholder=""/></label></form>

Content retrieved from post body:

<form class="wp-block-kathy-contact-form kathyContactForm"><label class="kathyContactFormEmailLabel flexCenterCenter"><span class="kathyContactFormEmailLabelText flexCenterCenter">x</span><input class="kathyContactFormEmail flexCenterCenter" placeholder="z"/></label></form>

Content is saved and correctly displayed on the site, but editor is showing errors.

My js:

registerBlockType('kathy/contact-form', {
    title: 'Kathy Contact Form',
    description: 'Contact form',
    icon: 'format-image',
    category: 'kathy',

    attributes: {
        emailLabel: {
            type: 'string',
            source: 'html',
            selector: 'span.kathyContactFormEmailLabelText'
        },
        emailPlaceholder: {
            type: 'string',
            source: 'html',
            attributes: "placeholder",
            selector: 'span.kathyContactFormEmail'
        }
    },

    edit: ({attributes, setAttributes}) => {
        const {emailLabel, emailPlaceholder, nameLabel, namePlaceholder,  messageLabel, messagePlaceholder, submitText} = attributes;
        const updateEl = (el, val) => {
            switch(el) {
                case "emailLabel":
                    setAttributes({emailLabel: val});
                    break;
                case "emailPlaceholder":
                    console.log(val)
                    setAttributes({emailPlaceholder: val});
                    break;
            }
        }

        return ((
            <form className={'kathyContactForm'}>
                <label>
                    <RichText className={'kathyContactFormEmailLabelText flexCenterCenter'} key="editable"
                            tagName="span" placeholder="Label text" value={emailLabel}
                            onChange={(val) => updateEl("emailLabel", val)} /> 
                    <RichText className={'kathyContactFormEmail flexCenterCenter'} key="editable"
                            tagName="span" placeholder="Placeholder text" value={emailPlaceholder}
                            onChange={(val) => updateEl("emailPlaceholder", val)} /> 
                </label>
            </form>
        ));
    },
    save: ({attributes}) => {
        const {emailLabel, emailPlaceholder} = attributes;
        return (
            <form className={'kathyContactForm'}>
                <label className={"kathyContactFormEmailLabel flexCenterCenter"}>
                    <span className={"kathyContactFormEmailLabelText flexCenterCenter"}>{emailLabel}</span>
                    <input className={"kathyContactFormEmail flexCenterCenter"} 
                           placeholder={emailPlaceholder}
                    />
            </form>
        );
    }
});

I know (or I think I know) error is showed because of span in edit and input in save, but when I replaced span to input in edit and attributes – no error is showed, but updating doesn’t work. How can I fix it?