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

<%
	local fw = require "luci.model.firewall".init()
	local wz = fw:get_zone("wan")
	local lz = fw:get_zone("lan")
%>

<div class="cbi-section-create cbi-tblsection-create">
	<% if wz and lz then %>
		<br />
		<table class="cbi-section-table" style="margin-left:5px">
			<tr class="cbi-section-table-titles">
				<th class="cbi-section-table-cell left" colspan="4"><%:Open ports on router%>:</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 port%></th>
				<th class="cbi-section-table-cell"></th>
			</tr>
			<tr class="cbi-section-table-row">
				<td class="cbi-section-table-cell" style="width:130px">
					<input type="text" class="cbi-input-text" id="_newopen.name" name="_newopen.name" placeholder="<%:New input rule%>" />
				</td>
				<td class="cbi-section-table-cell" style="width:110px">
					<select class="cbi-input-select" id="_newopen.proto" name="_newopen.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:110px">
					<input type="text" class="cbi-input-text" id="_newopen.extport" name="_newopen.extport" />
				</td>
				<td class="cbi-section-table-cell left">
					<input type="submit" class="cbi-button cbi-button-add" name="_newopen.submit" value="<%:Add%>" />
				</td>
			</tr>
		</table>

		<table class="cbi-section-table" style="margin-left:5px">
			<tr class="cbi-section-table-titles">
				<th class="cbi-section-table-cell left" colspan="6"><br /><%:New forward rule%>:</th>
			</tr>
			<tr class="cbi-section-table-descr">
				<th class="cbi-section-table-cell"><%:Name%></th>
				<th class="cbi-section-table-cell"><%:Source zone%></th>
				<th class="cbi-section-table-cell"><%:Destination zone%></th>
				<th class="cbi-section-table-cell"></th>
			</tr>
			<tr class="cbi-section-table-row">
				<td class="cbi-section-table-cell" style="width:130px">
					<input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New forward rule%>" />
				</td>
				<td class="cbi-section-table-cell" style="width:110px">
					<select class="cbi-input-text" id="_newfwd.src" name="_newfwd.src">
						<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
							<option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
						<%- end %>
					</select>
				</td>
				<td class="cbi-section-table-cell" style="width:110px">
					<select class="cbi-input-text" id="_newfwd.dest" name="_newfwd.dest">
						<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
							<option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
						<%- end %>
					</select>
				</td>
				<td class="cbi-section-table-cell left">
					<input type="submit" class="cbi-button cbi-button-link" name="_newfwd.submit" value="<%:Add and edit...%>" />
				</td>
			</tr>
		</table>

		<script type="text/javascript">//<![CDATA[
			cbi_validate_field('_newopen.extport', true, 'list(neg(portrange))');
			cbi_bind(document.getElementById('_newopen.extport'), 'blur',
				function() {
					var n = document.getElementById('_newopen.name');
					var p = document.getElementById('_newopen.proto');
					var hints = {
					/*  port    name     0=both, 1=tcp, 2=udp, 3=other */
						22:   [ 'SSH',   1 ],
						53:   [ 'DNS',   0 ],
						80:   [ 'HTTP',  1 ],
						443:  [ 'HTTPS', 1 ],
					};

					if (!this.className.match(/invalid/))
					{
						var hint = hints[this.value || 0];
						if (hint)
						{
							p.selectedIndex = hint[1];

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


			cbi_validate_field('cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>', true, 'uciname');
		//]]></script>
	<% else %>
		<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
	<% end %>
</div>