# 表单

houdunren.com @ 向军大叔

表单是服务器收集用户数据的方式。

# FORM

一般情况下表单项要放在 FORM 内提交。

<form action="hd.php" method="POST">
	<fieldset>
		<legend>测试</legend>
		<input type="text">
	</fieldset>
</form>
属性 说明
action 后台地址
method 提交方式 GET 或 POST

# LABEL

使用 label 用于描述表单标题,当点击标题后文本框会获得焦点,需要保证使用的ID在页面中是唯一的。

<form action="hd.php" method="POST" novalidate>
<label for="title">标题</label>
<input type="text" name="title" id="title">
</form>

也可以将文本框放在 label 标签内部,这样就不需要设置 id 与 for 属性了

# INPUT

文本框用于输入单行文本使用,下面是常用属性与示例。

属性 说明
type 表单类型默认为 text
name 后台接收字段名
required 必须输入
placeholder 提示文本内容
value 默认值
maxlength 允许最大输入字符数
size 表单显示长度,一般用不使用而用 css 控制
disabled 禁止使用,不可以提交到后台
readonly 只读,可提交到后台
<form action="hd.php" method="POST" novalidate>
        <fieldset>
            <legend>文本框</legend>
            <input type="text" name="title" required placeholder="请输入标题" maxlength="5" value="" size="100">
        </fieldset>
</form>

# 其他类型

通过设置表单的 type 字段可以指定不同的输入内容。

类型 说明
email 输入内容为邮箱
url 输入内容为URL地址
password 输入内容为密码项
tel 电话号,移动端会调出数字键盘
search 搜索框
hidden 隐藏表单
submit 提交表单

# HIDDEN

隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义。

<input type="hidden" name="id" value="1">

# 提交表单

创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据如使用AJAX,或HTML的表单按钮。

  1. 使用input构建提交按钮,如果设置了name值按钮数据也会提交到后台,如果有多个表单项可以通过些判断是哪个表单提交的。

    <input type="submit" name="submit" value="提交表单">
    
  2. 使用button也可以提交,设置type属性为submit 或不设置都可以提交表单。

    <button type="submit">提交表单</button>
    

# 禁用表单

通过为表单设置 disabledreadonly 都可以禁止修改表单,但 readonly表单的数据可以提交到后台。

<input type="text" name="web" value="houdunren.com" readonly>

# PATTERN

表单可以通过设置 pattern 属性指定正则验证,也可以使用各种前端验证库如 formvalidatorvalidator.js

属性 说明
pattern 正则表达式验证规则
oninvalid 输入错误时触发的事件
<form action="">
	<input type="text" name="username" pattern="[A-z]{5,20}" 
	oninvalid="validate('请输入5~20位字母的用户名')">
	<button>提交</button>
</form>
    
<script>
	function validate(message) {
		alert(message);
	}
</script>

# TEXTAREA

文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor、ckeditor等。

选项 说明
cols 列字符数(一般使用css控制更好)
rows 行数(一般使用css控制更好)

image-20190805214818055

<textarea name="content" cols="30" rows="3">houdunren.com</textarea>

# SELECT

下拉列表项可用于多个值中的选择。

选项 说明
multiple 支持多选
size 列表框高度
optgroup 选项组
selected 选中状态
option 选项值

image-20190805215509898

<select name="lesson">
        <option value="">== 选择课程 ==</option>
        <optgroup label="后台">
            <option value="php">PHP</option>
            <option value="linux">LINUX</option>
            <option value="mysql">MYSQL</option>
        </optgroup>
        <optgroup label="前台">
            <option value="php">HTML</option>
            <option value="linux">JAVASCRIPT</option>
            <option value="mysql">CSS</option>
        </optgroup>
</select>

# RADIO

单选框指只能选择一个选项的表单,如性别的选择男、女、保密 只能选择一个。

选项 说明
checked 选中状态

image-20190805214006476

<input type="radio" name="sex" value="boy" id="boy">
<label for="boy">男</label>

<input type="radio" name="sex" value="girl" id="girl" checked>
<label for="girl">女</label>

# CHECKBOX

复选框指允许选择多个值的表单。

image-20190805214322364

<fieldset>
        <legend>复选框</legend>
        <input type="checkbox" name="sex" value="boy" id="boy">
        <label for="boy">PHP</label>

        <input type="checkbox" name="sex" value="girl" id="girl" checked>
        <label for="girl">MYSQL</label>
</fieldset>

# 文件上传

文件上传有多种方式,可以使用插件或JS拖放上传处理。HTML本身也提供了默认上传的功能,只是上传效果并不是很美观。

选项 说明
multiple 支持多选
accept 允许上传类型 .png,.psdimage/png,image/gif

image-20190805220123718

<form action="" method="POST" enctype="multipart/form-data">
	<fieldset>
		<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
	</fieldset>
	<button>保存</button>
</form>

# 日期与时间

属性 说明
step 间隔:date 缺省是1天,week缺省是1周,month缺省是1月
min 最小时间
max 最大时间

日期选择

image-20190814160102123

<input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">

周选择

image-20190814160020196

<input type="week">

月份选择

image-20190814160135995

<input type="month">

日期与时间

image-20190814160532544

<input type="datetime-local" name="datetime">

# DATALIST

input表单的输入值选项列表

image-20190814175611789

<form action="" method="post">
  <input type="text" list="lesson">
  <datalist id="lesson">
    <option value="PHP">后台管理语言</option>
    <option value="CSS">美化网站页面</option>
    <option value="MYSQL">掌握数据库使用</option>
  </datalist>
</form>

# autocomplete

浏览器基于之前键入过的值,应该显示出在字段中填写的选项。

<form action="">
  <input type="search" autocomplete="on" name="content" />
  <button>提交</button>
</form>

# 列表

列表的使用与word 等软件的列表概念相似,只不过是应用在网页展示中。

# 有序列表

有序列表是指有数字编号的列表项,可以使用CSS定义更多样式,具体请查看CSS章节。

image-20190801233425533

<style>
        .li-style1{
            /* 
            circle      空心圆
            disc        实心圆
            square      实心方块
            decimal     数字
            upper-alpha 大写字母
            lower-alpha 小写字母
            upper-roman 大写罗马数字
            lower-roman 小写罗马数字
             */
            list-style-type: decimal;
        }
        
        .li-style2{
        	/* 取消风格 */
            list-style: none;
        }
        .li-style3{
        	/*inside 内部 outside 外部(默认)*/
        	list-style-position: inside;
        }
</style>

<ol start="1">
	<li>后盾人</li>
	<li>houdunren.com</li>
	<li>hdcms.com</li>
</ol>

# 无序列表

没有数字编号的列表项,可以使用CSS定义更多样式,具体请查看CSS章节。

image-20190801233519967

<ul>
	<li>后盾人</li>
	<li>houdunren.com</li>
	<li>hdcms.com</li>
</ul>

# 描述列表

描述列表指每个列表项有单独的标题。

image-20190801234034944

<dl>
	<dt>开源产品</dt>
	<dd>hdcms内容管理系统</dd>
	<dd>hdjs前库组件库</dd>
	
	<dt>网站导航</dt>
	<dd>houdunren.com</dd>
	<dd>houdunwang.com</dd>
</dl>