luci/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm

<%-
	local fw = require "luci.model.firewall".init()
	local izl = { }
	local ezl = { }
	local _, z
	for _, z in ipairs(fw:get_zones()) do
		if z:name() ~= "wan" then
			izl[#izl+1] = z
		end
		if z:name() ~= "lan" then
			ezl[#ezl+1] = z
		end
	end
-%>
<div class="cbi-section-create cbi-tblsection-create">
	<br />
	<table class="cbi-section-table" style="width:810px; margin-left:5px">
		<tr class="cbi-section-table-titles">
			<th class="cbi-section-table-cell" colspan="8"><%:New port forward%>:</th>
		</tr>
		<tr class="cbi-section-table-descr">
			<th class="cbi-section-table-cell"><%:Name%></th>
			<th class="cbi-section-table-cell"><%:Protocol%></th>
			<th class="cbi-section-table-cell"><%:External zone%></th>
			<th class="cbi-section-table-cell"><%:External port%></th>
			<th class="cbi-section-table-cell"><%:Internal zone%></th>
			<th class="cbi-section-table-cell"><%:Internal IP address%></th>
			<th class="cbi-section-table-cell"><%:Internal port%></th>
			<th class="cbi-section-table-cell"></th>
		</tr>
		<tr class="cbi-section-table-row">
			<td class="cbi-section-table-cell">
				<input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New port forward%>" />
			</td>
			<td class="cbi-section-table-cell" style="width:110px">
				<select class="cbi-input-select" id="_newfwd.proto" name="_newfwd.proto">
					<option value="tcp udp">TCP+UDP</option>
					<option value="tcp">TCP</option>
					<option value="udp">UDP</option>
					<option value="other"><%:Other...%></option>
				</select>
			</td>
			<td class="cbi-section-table-cell" style="width:55px">
				<select class="cbi-input-select" id="_newfwd.extzone" name="_newfwd.extzone">
					<% for _, z in ipairs(ezl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %>
				</select>
			</td>
			<td class="cbi-section-table-cell" style="width:110px">
				<input type="text" class="cbi-input-text" id="_newfwd.extport" name="_newfwd.extport" />
			</td>
			<td class="cbi-section-table-cell" style="width:55px">
				<select class="cbi-input-select" id="_newfwd.intzone" name="_newfwd.intzone">
					<% for _, z in ipairs(izl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %>
				</select>
			</td>
			<td class="cbi-section-table-cell" style="width:110px">
				<input type="text" class="cbi-input-text" id="_newfwd.intaddr" name="_newfwd.intaddr" />
			</td>
			<td class="cbi-section-table-cell" style="width:110px">
				<input type="text" class="cbi-input-text" id="_newfwd.intport" name="_newfwd.intport" />
			</td>
			<td class="cbi-section-table-cell">
				<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
			</td>
		</tr>
	</table>

	<script type="text/javascript">//<![CDATA[
		cbi_validate_field('_newfwd.extport', true, 'portrange');
		cbi_validate_field('_newfwd.intaddr', true, 'host');
		cbi_validate_field('_newfwd.intport', true, 'portrange');

		cbi_combobox_init('_newfwd.intaddr', {
			<% first = true; luci.sys.net.ipv4_hints(function(ip, name) %>
				<%- if first then first = false else %>,<% end -%>'<%=ip%>': '<%=ip%> (<%=name%>)'
			<%- end) %> }, '', '<%: -- custom -- %>');

		cbi_bind(document.getElementById('_newfwd.extport'), 'blur',
			function() {
				var n = document.getElementById('_newfwd.name');
				var p = document.getElementById('_newfwd.proto');
				var i = document.getElementById('_newfwd.intport');
				var hints = {
				/*  port    name     0=both, 1=tcp, 2=udp, 3=other */
					21:   [ 'FTP',   1 ],
					22:   [ 'SSH',   1 ],
					53:   [ 'DNS',   0 ],
					80:   [ 'HTTP',  1 ],
					443:  [ 'HTTPS', 1 ],
					3389: [ 'RDP',   1 ],
					5900: [ 'VNC',   1 ],
				};

				if (!this.className.match(/invalid/))
				{
					if (!i.value) i.value = this.value;

					var hint = hints[this.value || 0] || hints[i.value || 0];
					if (hint)
					{
						p.selectedIndex = hint[1];

						if (!n.value)
							n.value = hint[0];
					}
					else if (!n.value)
					{
						n.value = 'Forward' + this.value;
					}
				}
			});


		cbi_validate_field('cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>', true, 'uciname');
	//]]></script>
</div>