表单

表单是网页收集用户数据的方式

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>

input

input 输入框用于输入单行文本使用，下买呢是常用属性与示例。

属性	说明
type	表单类型默认是text
name	后台接收的字段名
required	必填项
placeholder	提示文本内容
value	默认值
maxlength	允许最大输入字符数量
size	表单显示长度，一般不使用。使用css控制长度。
disable	禁止使用，不可以提交到后台。
readonly	只读，可提交到后台
capture	使用麦克风，视频或者摄像头的哪种方式获取手机上传文件，支持的值有microphone,video,camera

<form action="hd.php" method="POST" novalidate>
  <fieldset>
      <legend>文本框</legend>
      <input type="text" name="title" required placeholder="请输入标题" maxlength="5" value="" size="100">
  </fieldset>
</form>

调取摄像头

当input标签类型为file时，手机会让用户选择图片或者拍照，如果想直接调去摄像头使用以下代码。

<input type="file" capture="camera" accept="image/*"/>

其他类型

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

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

hidden

隐藏表单用于提交后台数据，但在前台内容不现实所以在其上做用样式定义没有任何意义。

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

提交表单

查UN更加爱你表单按钮可以将表单数据提交到后台，有多种方式可以提交水如使用AJAX，或html的表单按钮。

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

   <input type="submit" name="submit" value="提交表单" />

2. 使用button也可以提交，设置type属性为submit。

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

禁用表单

通过为表单设置disabled或readonly都可以禁止使用表单，但是readonly表单的数据可以提交到后台。

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

pattern

pattern属性可以设置表单的正则验证，也可以使用各种前端验证库如formvalidator或者validator.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

textarea标签是输入文本域，可以使用多行文本的表单。如果更复杂那就使用ueditor、ckeditor等。

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

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

select

select标签是下啦列表项，可以用于多个值的选择。

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

<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

radio标签是单选框，只能选择一个值的表单，如性别。

选项	说明
checked	选中状态

<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

Checkbox标签是复选框，允许选择多个值的表单。

<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,psd或者image.png,image/gif

<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	最大时间

日期选择

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

周选择

<input type="week">

月份选择

<input type="month">

日期和时间

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

datelist

input 表单的输入值选项列表

<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定义更多样式。

<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>A1</li>
	<li>A2</li>
	<li>A3</li>
</ol>

无序列表

没有数字编号的列表项，可以使用CSS定义更多样式

<ul>
	<li>A1</li>
	<li>A2</li>
	<li>A3</li>
</ul>

描述列表

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

<dl>
	<dt>开源产品</dt>
	<dd>hdcms内容管理系统</dd>
	<dd>hdjs前库组件库</dd>

	<dt>网站导航</dt>
	<dd>houdunren.com</dd>
	<dd>houdunwang.com</dd>
</dl>