4.表单

1.form标签

· action属性：指定表单的发送地址
· target属性：设置窗口打开方式（_self默认值 在当前窗口打开、_blank在新窗口打开、_top、_parent）
· method属性：表单数据发送至服务器的方法，默认值时get。常用的有post和get。
                        1.get方法，数据会附在网址后面发送给服务器。不安全。数据量小
                        2.post方法，数据不会附在网址后，而是将表单中所有数据打包发送给服务器，等待服务器来读取。安全。数据量不受限制
· name属性：用来为当前表单定义一个独一无二的名称，控制表单与后台程序之间的关系
· novalidate属性：数据提交时不校验（一般不怎么用）

<form action="http://127.0.0.1/test01.php" target="_blank" method="get" name="biaoDan1" novalidate>
    <input type="text" name="shuRuKuang" id="id1" placeholder="请输入···">
    <input type="submit" name="tiJiao" value="提交">
</form>

 

2.input标签

· name属性：输入内容的识别名称，传递参数时的参数名称
· value属性：默认值
· size属性：可以使文本框变长
· maxlength属性：输入的最大字数
· readonly属性：只读属性，设置的内容不可变更
· disabled属性：设置为不可用（不可操作）
· required属性：设置该内容为必须填写项，否则无法提交
· placeholder属性：当文本框活得焦点时被清空
· autocomplet属性：属性值为on/off，定义是否开启浏览器自动记忆功能
· autofocus属性：自动获得焦点
· accesskey属性：指定快捷键（指定快捷键后，按alt+快捷键便可以自动或得焦点）
· tabindex属性：指定按tab键时，项目间的移动顺序

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 type属性：指定输入内容的类型

type属性	展示	代码
text		<input type='text' value='123'>
password		<input type='password' value='123'>
checkbox--要设置默认选项checked		<input type='checkbox' checked>语文 <input type='checkbox'>数学 <input type='checkbox'>英语
radio--要设置默认选项checked，且必须将同一组单选项设置一个相同的name		<input type='radio' name="1" checked>语文 <input type='radio' name="1">数学 <input type='radio' name="1">英语
submit/reset/button		<input type="submit" value='提交'> <input type="reset" value='重置'> <input type="button" value='按钮'>
image--图片式提交按钮		<input type="image" src='../../../static/img3.jpg' width="30px">
hidden--隐藏字段		<input type='hidden'>
email--邮箱（输入后鼠标悬浮在输入框，会提示校验） url--一个网址（会校验） tel--电话（不会校验）		<input type="email" value="会校验"> <input type="url" value="会校验"> <input type="tel" value="不会校验">
number--配合max/min/step/value规定最大值/最小值/步长/默认值		<input type="number" max="10" min="1" step="2" value="6">
range--同number，也是表示一定范围的数值输入，但是是以活动条的状态显示		<input type='range' max="10" min="1" step="2" value="6">
color--建立一个颜色的选择输入框		<input type='color'>
datetime-local/date/month/week/time--时间类		<input type="datetime-local"> <input type="date"> <input type="month"> <input type="week"> <input type="time">
search--建立一个搜索框，供用户输入搜索的关键词		<input type='search' value='123'>
file--创建一个文件选取的输入框，可通过accept属性规定选取文件的类型,multiple可以设定一次允许选择多个文件		<input type="file" accept=".png" multiple>
pattern--作用是制定输入类型的正则表达式 例如：pattern='[0,9]{2}' 表示只能输入0~9，且只能是2位数		<input type="text" pattern="[0,9]{2}">

 

 

3.button标签

注意：与input标签建立的按钮相同（在form中尽量用input，其他地方可以用button）
· type属性：值有submit/reset/button
· name/value/disabled属性：同input
· autofocus属性：按钮自动获得焦点
· form属性：设定按钮属于哪个表单
· formaction属性：指定表单发送的对象url
· formenctype属性：指定表单数据发送类型

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

 

4.select标签/datalist标签

select标签:下拉框
                · size属性：定义列表显示列表项的个数
                · multiple：定义是否可以多选
                · 也可以添加autofocus、disabled等属性
datalist标签:作用是输入一个字母后提示可选项，通常与input搭配使用

//select标签:下拉框
<select size="1" multiple>
    <option>语文</option>
    <option>数学</option>
    <option>英语</option>
</select>

//datalist标签:作用是输入一个字母后提示可选项，通常与input搭配使用
<input type="text" name="shuRuKuang" list="datalist1">
<datalist id="datalist1">
    <option>html</option>
    <option>csss</option>
    <option>javascript</option>
</datalist>

 

5.optgroup标签

· 作用是分组

<select>
    <optgroup label="科目系列">
        <option>语文</option>
        <option>数学</option>
    </optgroup>
    <optgroup label="语言系列">
        <option>html</option>
        <option>css</option>
    </optgroup>
</select>

 

6.label标签

· 作用是点标签上的字也能选中复选框

//方式一
<label>
    <input type="checkbox" name="fuXuanKuang1">语文
</label>

//方式二
<input type="checkbox" name="fuXuanKuang2" id="fuXuanKuang2">
<label for="fuXuanKuang2">语文</label>

 

7.textarea标签

· 多行文本框

<textarea cols="30" rows="5"></textarea>

 

8.output标签

· oninput元素：当用户输入数据时触发
· parseInt函数：解析字符串，返回一个整数
· for元素：定义输出的结果

<form action="" oninput="sum.value=parseInt(num1.value)+parseInt(num2.value)">
    <input type="number" name="num1" />+
    <input type="number" name="num2" />=
    <output name="sum" for="num1 num2"></output>
</form>

 

9.progress标签/meter标签

· progress标签：value表示当前值、max表示最大值
· meter标签：value/max/min/hign高标准/low低标准

<progress value="30" max="100"></progress>
<meter value="82" max="100" min="0" high="80" low="20"></meter>

 

10.fieldset标签/legend标签

· fieldset标签：将表单内相关元素分组，通常会有一个边框
· legend标签：为legend定义一个标题

<fieldset>
    <legend>fieldset的标题</legend>
    账号：<input type="text">
</fieldset>

 

11.details标签/summary标签

· details标签：用于描述文档的细节。open属性规定页面上的details是可见的
· summary标签：为details定义标题，用户点击标题的时，会显示details中的内容

<details>
    <summary>details的标题</summary>
    <p>具体的内容</p>
</details>