portainer/app/components/createContainer/createcontainer.html

<rd-header>
  <rd-header-title title="Create container"></rd-header-title>
  <rd-header-content>
    <a ui-sref="containers">Containers</a> &gt; Add container
  </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <!-- name-input -->
          <div class="form-group">
            <label for="container_name" class="col-sm-1 control-label text-left">Name</label>
            <div class="col-sm-11">
              <input type="text" class="form-control" ng-model="config.name" id="container_name" placeholder="e.g. myContainer">
            </div>
          </div>
          <!-- !name-input -->
          <div class="col-sm-12 form-section-title">
            Image configuration
          </div>
          <!-- image-and-registry -->
          <div class="form-group">
            <por-image-registry image="config.Image" registry="formValues.Registry"></por-image-registry>
          </div>
          <!-- !image-and-registry -->
          <!-- always-pull -->
          <div class="form-group">
            <div class="col-sm-12">
              <label for="ownership" class="control-label text-left">
                Always pull the image
                <portainer-tooltip position="bottom" message="When enabled, Portainer will automatically try to pull the specified image before creating the container."></portainer-tooltip>
              </label>
              <label class="switch" style="margin-left: 20px;">
                <input type="checkbox" ng-model="formValues.alwaysPull"><i></i>
              </label>
            </div>
          </div>
          <!-- !always-pull -->
          <div class="col-sm-12 form-section-title">
            Ports configuration
          </div>
          <!-- publish-exposed-ports -->
          <div class="form-group">
            <div class="col-sm-12">
              <label class="control-label text-left">
                Publish all exposed ports
                <portainer-tooltip position="bottom" message="When enabled, Portainer will let Docker automatically map a random port on the host to each one defined in the image Dockerfile."></portainer-tooltip>
              </label>
              <label class="switch" style="margin-left: 20px;">
                <input type="checkbox" ng-model="config.HostConfig.PublishAllPorts"><i></i>
              </label>
            </div>
          </div>
          <!-- !publish-exposed-ports -->
          <!-- port-mapping -->
          <div class="form-group">
            <div class="col-sm-12">
              <label class="control-label text-left">Port mapping</label>
              <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addPortBinding()">
                <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
              </span>
            </div>
            <!-- port-mapping-input-list -->
            <div class="col-sm-12 form-inline" style="margin-top: 10px;">
              <div ng-repeat="portBinding in config.HostConfig.PortBindings" style="margin-top: 2px;">
                <!-- host-port -->
                <div class="input-group col-sm-4 input-group-sm">
                  <span class="input-group-addon">host</span>
                  <input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)">
                </div>
                <!-- !host-port -->
                <span style="margin: 0 10px 0 10px;">
                  <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                </span>
                <!-- container-port -->
                <div class="input-group col-sm-4 input-group-sm">
                  <span class="input-group-addon">container</span>
                  <input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80">
                </div>
                <!-- !container-port -->
                <!-- protocol-actions -->
                <div class="input-group col-sm-3 input-group-sm">
                  <div class="btn-group btn-group-sm">
                    <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'tcp'">TCP</label>
                    <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'udp'">UDP</label>
                  </div>
                  <button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                  </button>
                </div>
                <!-- !protocol-actions -->
              </div>
            </div>
            <!-- !port-mapping-input-list -->
          </div>
          <!-- !port-mapping -->
          <!-- access-control -->
          <por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form>
          <!-- !access-control -->
          <!-- actions -->
          <div class="col-sm-12 form-section-title">
            Actions
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Image" ng-click="create()">Start container</button>
              <a type="button" class="btn btn-default btn-sm" ui-sref="containers">Cancel</a>
              <i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
            </div>
          </div>
          <!-- !actions -->
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-cog" title="Advanced container settings"></rd-widget-header>
      <rd-widget-body>
        <ul class="nav nav-pills nav-justified">
          <li class="active interactive"><a data-target="#command" data-toggle="tab">Command</a></li>
          <li class="interactive"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
          <li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
          <li class="interactive"><a data-target="#env" data-toggle="tab">Env</a></li>
          <li class="interactive"><a data-target="#labels" data-toggle="tab">Labels</a></li>
          <li class="interactive"><a data-target="#restart-policy" data-toggle="tab">Restart policy</a></li>
          <li class="interactive"><a data-target="#runtime" data-toggle="tab">Runtime</a></li>
        </ul>
        <!-- tab-content -->
        <div class="tab-content">
          <!-- tab-command -->
          <div class="tab-pane active" id="command">
            <form class="form-horizontal" style="margin-top: 15px;">
              <!-- command-input -->
              <div class="form-group">
                <label for="container_command" class="col-sm-2 col-lg-1 control-label text-left">Command</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" ng-model="config.Cmd" id="container_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf">
                </div>
              </div>
              <!-- !command-input -->
              <!-- entrypoint-input -->
              <div class="form-group">
                <label for="container_entrypoint" class="col-sm-2 col-lg-1 control-label text-left">Entry Point</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" ng-model="config.Entrypoint" id="container_entrypoint" placeholder="e.g. /bin/sh -c">
                </div>
              </div>
              <!-- !entrypoint-input -->
              <!-- workdir-user-input -->
              <div class="form-group">
                <label for="container_workingdir" class="col-sm-2 col-lg-1 control-label text-left">Working Dir</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" ng-model="config.WorkingDir" id="container_workingdir" placeholder="e.g. /myapp">
                </div>
                <label for="container_user" class="col-sm-1 control-label text-left">User</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" ng-model="config.User" id="container_user" placeholder="e.g. nginx">
                </div>
              </div>
              <!-- !workdir-user-input -->
              <!-- console -->
              <div class="form-group">
                <label for="container_console" class="col-sm-2 col-lg-1 control-label text-left">Console</label>
                <div class="col-sm-10 col-lg-11">
                  <div class="col-sm-4">
                    <label class="radio-inline">
                      <input type="radio" name="container_console" ng-model="formValues.Console" value="both">
                      Interactive & TTY <span class="small text-muted">(-i -t)</span>
                    </label>
                  </div>
                  <div class="col-sm-4">
                    <label class="radio-inline">
                      <input type="radio" name="container_console" ng-model="formValues.Console" value="interactive">
                      Interactive <span class="small text-muted">(-i)</span>
                    </label>
                  </div>
                </div>
                <div class="col-sm-offset-2 col-sm-10 col-lg-offset-1 col-lg-11">
                  <div class="col-sm-4">
                    <label class="radio-inline">
                      <input type="radio" name="container_console" ng-model="formValues.Console" value="tty">
                      TTY <span class="small text-muted">(-t)</span>
                    </label>
                  </div>
                  <div class="col-sm-4">
                    <label class="radio-inline">
                      <input type="radio" name="container_console" ng-model="formValues.Console" value="none">
                      None
                    </label>
                  </div>
                </div>
              </div>
              <!-- !console -->
            </form>
          </div>
          <!-- !tab-command -->
          <!-- tab-volume -->
          <div class="tab-pane" id="volumes">
            <form class="form-horizontal" style="margin-top: 15px;">
              <!-- volumes -->
              <div class="form-group">
                <div class="col-sm-12" style="margin-top: 5px;">
                  <label class="control-label text-left">Volume mapping</label>
                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addVolume()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume
                  </span>
                </div>
                <!-- volumes-input-list -->
                <div class="form-inline" style="margin-top: 10px;">
                  <div ng-repeat="volume in formValues.Volumes">
                    <!-- volume-line1 -->
                    <div class="col-sm-12 form-inline" style="margin-top: 10px;">
                      <!-- container-path -->
                      <div class="input-group input-group-sm col-sm-6">
                        <span class="input-group-addon">container</span>
                        <input type="text" class="form-control" ng-model="volume.containerPath" placeholder="e.g. /path/in/container">
                      </div>
                      <!-- !container-path -->
                      <!-- volume-type -->
                      <div class="input-group col-sm-5" style="margin-left: 5px;">
                        <div class="btn-group btn-group-sm">
                          <label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'volume'" ng-click="volume.name = ''">Volume</label>
                          <label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'bind'" ng-click="volume.name = ''">Bind</label>
                        </div>
                        <button class="btn btn-sm btn-danger" type="button" ng-click="removeVolume($index)">
                          <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>
                      </div>
                      <!-- !volume-type -->
                    </div>
                    <!-- !volume-line1 -->
                    <!-- volume-line2 -->
                    <div class="col-sm-12 form-inline" style="margin-top: 5px;">
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      <!-- volume -->
                      <div class="input-group input-group-sm col-sm-6" ng-if="volume.type === 'volume'">
                        <span class="input-group-addon">volume</span>
                        <select class="form-control" ng-model="volume.name">
                          <option selected disabled hidden value="">Select a volume</option>
                          <option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:30}}</option>
                        </select>
                      </div>
                      <!-- !volume -->
                      <!-- bind -->
                      <div class="input-group input-group-sm col-sm-6" ng-if="volume.type === 'bind'">
                        <span class="input-group-addon">host</span>
                        <input type="text" class="form-control" ng-model="volume.name" placeholder="e.g. /path/on/host">
                      </div>
                      <!-- !bind -->
                      <!-- read-only -->
                      <div class="input-group input-group-sm col-sm-5" style="margin-left: 5px;">
                        <div class="btn-group btn-group-sm">
                          <label class="btn btn-primary" ng-model="volume.readOnly" uib-btn-radio="false">Writable</label>
                          <label class="btn btn-primary" ng-model="volume.readOnly" uib-btn-radio="true">Read-only</label>
                        </div>
                      </div>
                      <!-- !read-only -->
                    </div>
                    <!-- !volume-line2 -->
                  </div>
                </div>
                <!-- !volumes-input-list -->
              </div>
            </form>
            <!-- !volumes -->
          </div>
          <!-- !tab-volume -->
          <!-- tab-network -->
          <div class="tab-pane" id="network">
            <form class="form-horizontal" style="margin-top: 15px;">
              <div class="form-group" ng-if="globalNetworkCount === 0 && applicationState.endpoint.mode.provider !== 'DOCKER_SWARM_MODE'">
                <div class="col-sm-12">
                  <span class="small text-muted">You don't have any shared network. Head over the <a ui-sref="networks">networks view</a> to create one.</span>
                </div>
              </div>
              <!-- network-input -->
              <div class="form-group">
                <label for="container_network" class="col-sm-2 col-lg-1 control-label text-left">Network</label>
                <div class="col-sm-9">
                  <select class="form-control" ng-model="config.HostConfig.NetworkMode" id="container_network">
                    <option selected disabled hidden value="">Select a network</option>
                    <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
                  </select>
                </div>
              </div>
              <!-- !network-input -->
              <!-- container-name-input -->
              <div class="form-group" ng-if="config.HostConfig.NetworkMode == 'container'">
                <label for="container_network_container" class="col-sm-2 col-lg-1 control-label text-left">Container</label>
                <div class="col-sm-9">
                  <select ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'" ng-options="container|containername for container in runningContainers" class="form-control" ng-model="formValues.NetworkContainer">
                    <option selected disabled hidden value="">Select a container</option>
                  </select>
                  <select ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'" ng-options="container|swarmcontainername for container in runningContainers" class="form-control" ng-model="formValues.NetworkContainer">
                    <option selected disabled hidden value="">Select a container</option>
                  </select>
                </div>
              </div>
              <!-- !container-name-input -->
              <!-- hostname-input -->
              <div class="form-group">
                <label for="container_hostname" class="col-sm-2 col-lg-1 control-label text-left">Hostname</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" ng-model="config.Hostname" id="container_hostname" placeholder="e.g. web01">
                </div>
              </div>
              <!-- !hostname-input -->
              <!-- domainname-input -->
              <div class="form-group">
                <label for="container_domainname" class="col-sm-2 col-lg-1 control-label text-left">Domain Name</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" ng-model="config.Domainname" id="container_domainname" placeholder="e.g. example.com">
                </div>
              </div>
              <!-- !domainname -->
              <!-- ipv4-input -->
              <div class="form-group">
                <label for="container_ipv4" class="col-sm-2 col-lg-1 control-label text-left">IPv4 Address</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" ng-model="formValues.IPv4" id="container_ipv4" placeholder="e.g. 172.20.0.7">
                </div>
              </div>
              <!-- !ipv4-input -->
              <!-- ipv6-input -->
              <div class="form-group">
                <label for="container_ipv6" class="col-sm-2 col-lg-1 control-label text-left">IPv6 Address</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" ng-model="formValues.IPv6" id="container_ipv6" placeholder="e.g. a:b:c:d::1234">
                </div>
              </div>
              <!-- !ipv6-input -->
              <!-- extra-hosts-variables -->
              <div class="form-group">
                <div class="col-sm-12" style="margin-top: 5px;">
                  <label class="control-label text-left">Hosts file entries</label>
                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addExtraHost()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add additional entry
                  </span>
                </div>
                <!-- extra-hosts-input-list -->
                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
                  <div ng-repeat="variable in formValues.ExtraHosts" style="margin-top: 2px;">
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">value</span>
                      <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP">
                    </div>
                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeExtraHost($index)">
                      <i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <!-- !extra-hosts-input-list -->
              </div>
              <!-- !extra-hosts-variables -->
            </form>
          </div>
          <!-- !tab-network -->
          <!-- tab-labels -->
          <div class="tab-pane" id="labels">
            <form class="form-horizontal" style="margin-top: 15px;">
              <!-- labels -->
              <div class="form-group">
                <div class="col-sm-12" style="margin-top: 5px;">
                  <label class="control-label text-left">Labels</label>
                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
                  </span>
                </div>
                <!-- labels-input-list -->
                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
                  <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">name</span>
                      <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
                    </div>
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">value</span>
                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
                    </div>
                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel($index)">
                      <i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <!-- !labels-input-list -->
              </div>
              <!-- !labels-->
            </form>
          </div>
          <!-- !tab-labels -->
          <!-- tab-env -->
          <div class="tab-pane" id="env">
            <form class="form-horizontal" style="margin-top: 15px;">
              <!-- environment-variables -->
              <div class="form-group">
                <div class="col-sm-12" style="margin-top: 5px;">
                  <label class="control-label text-left">Environment variables</label>
                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addEnvironmentVariable()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add environment variable
                  </span>
                </div>
                <!-- environment-variable-input-list -->
                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
                  <div ng-repeat="variable in config.Env" style="margin-top: 2px;">
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">name</span>
                      <input type="text" class="form-control" ng-model="variable.name" placeholder="e.g. FOO">
                    </div>
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">value</span>
                      <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. bar">
                    </div>
                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable($index)">
                      <i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <!-- !environment-variable-input-list -->
              </div>
              <!-- !environment-variables -->
            </form>
          </div>
          <!-- !tab-labels -->
          <!-- tab-restart-policy -->
          <div class="tab-pane" id="restart-policy">
            <form class="form-horizontal" style="margin-top: 15px;">
              <div class="form-group">
                <div class="col-sm-12">
                  <label class="control-label text-left">
                    Restart policy
                  </label>
                  <div class="btn-group btn-group-sm" style="margin-left: 20px;">
                    <label class="btn btn-primary" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'no'">
                      Never
                    </label>
                    <label class="btn btn-primary" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'always'">
                      Always
                    </label>
                    <label class="btn btn-primary" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'on-failure'">
                      On failure
                    </label>
                    <label class="btn btn-primary" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'unless-stopped'">
                      Unless stopped
                    </label>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <!-- !tab-restart-policy -->
          <!-- tab-runtime -->
          <div class="tab-pane" id="runtime">
            <form class="form-horizontal" style="margin-top: 15px;">
              <!-- privileged-mode -->
              <div class="form-group">
                <div class="col-sm-12">
                  <label for="ownership" class="control-label text-left">
                    Privileged mode
                  </label>
                  <label class="switch" style="margin-left: 20px;">
                    <input type="checkbox" ng-model="config.HostConfig.Privileged"><i></i>
                  </label>
                </div>
              </div>
              <!-- !privileged-mode -->
            </form>
            <form class="form-horizontal" style="margin-top: 15px;">
              <!-- devices -->
              <div class="form-group">
                <div class="col-sm-12" style="margin-top: 5px;">
                  <label class="control-label text-left">Devices</label>
                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addDevice()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add device
                  </span>
                </div>
               <!-- devices-input-list -->
                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
                  <div ng-repeat="device in config.HostConfig.Devices" style="margin-top: 2px;">
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">host</span>
                      <input type="text" class="form-control" ng-model="device.pathOnHost" placeholder="e.g. /dev/tty0">
                    </div>
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">container</span>
                      <input type="text" class="form-control" ng-model="device.pathInContainer" placeholder="e.g. /dev/tty0">
                    </div>
                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeDevice($index)">
                      <i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <!-- !devices-input-list -->
              </div>
              <!-- !devices-->
            </form>

          </div>
          <!-- !tab-runtime -->
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>