As you must have wondered, setting attributes requires much more consideration than simply mapping them to an element. In this example, called ch04_setattributes, we will create a form with the existing attributes. In the form, the user will be able to change the attribute values, add new ones to the feature, and remove them. We will extend the previous example to achieve our goal.
Our form can have multiple possible layouts. A row with attributes will surely contain the attribute name, the attribute value, and a remove button. However, depending on the attribute's state, the name can be a span or a text input element. Besides the rows, the form will have the add and save buttons. As we will create a new div element for every row, we can create some simple CSS logic for these different cases:
.popup span {
display: inline-block;
width: 5%;
}
.popup span:first-child {
float: left;
width: 40%;
}
.popup input[type=text] {
width: 50%;
...