6、什么是表单

表单

表单就是用来收集用户填写的信息

什么是表单元素

什么是元素？

a:a标签 a标记 a元素

元素就是一种新的说法而已

组成表单标签的元素

表单元素

格式：<form>

表单元素

</form>

快捷键 input:type的值 tab

属性：value 输入框的默认值

注意：表单元素 不是独占一行的

文本框：

格式:<input type="text">

提高用户输入的体验

1.给输入框添加id属性并赋值

2.把文字放入label标签

3.将label中添加for属性并赋值 值=id的值

密码框：

格式：<input type="password">

单选按钮

格式：<input type="radio">男

注意：想要实现单选 表单radio的name属性值必须相同

如何默认选择 一个radio checked="checked"

多选按钮

格式：<input type="checkbox">读书

注意：实现默认选中 添加 checked属性

按钮

普通按钮：格式<input type="button" value="我是普通按钮">

注意：value 给按钮赋值【按钮的显示文字】

普通按钮结合js使用的

重置按钮：格式：<input type="reset" value="重置">

提交按钮：格式：<input type="submit" value="提交">

作用：把用户的输入信息提交到后台

注意点：提交到那里去？ form里 action指定提交地址

数据是如何过去的 name属性 以键值对的形式传输的

数据的提交方式是什么？ form里 method常见的两大提交方式 get/post安全的

隐藏域：格式：<input type="hidden" name="" value="999">

文件元素：<input type="file">

--------------------------------------------------------------

datalist标签（类似于下拉框）

作用：给输入框绑定一些选项 ，让用户获得更多的选择

注意：1.写一个输入框 <input type="text" >

2.写一个datalist列表 注意value值必须填写

<datalist>

<option value="我为什么这么帅">我为什么这么帅</option>

<option value="我为什么这么丑">我为什么这么丑</option>

<option value="我为什么这么傻">我为什么这么傻</option>

<option value="我为什么这么笨">我为什么这么笨</option>

<option value="我为什么这么骚">我为骚</option>

</datalist>

3给datalist添加id属性并赋值

<datalist id="add">

<option value="我为什么这么帅">我为什么这么帅</option>

<option value="我为什么这么丑">我为什么这么丑</option>

<option value="我为什么这么傻">我为什么这么傻</option>

<option value="我为什么这么笨">我为什么这么笨</option>

<option value="我为什么这么骚">我为骚</option>

</datalist>

4.给输入框添加属性list并赋值 值=id的值

<input type="text" list="add">

----------------------------------------------------------------------------------

非input标签

1.下拉框

格式：<select>

<option>苏州</option>

<option>非洲</option>

<option>八宝粥</option>

......

</select>

注意：下拉框不能输入内容

添加selected默认选择该内容 selected="selected"

2.文本域

格式：<textarea>

文本

</textarea>

z注意：默认情况下 可以无限换行

默认情况下输入框有自己的宽和高

可以通过rows/cols来设置文本域的宽/高

文本域的宽高可以拉伸 （之后学习ＣＳＳ可控制其不被拉伸）

------------------------------------------------------------------------

html5新增的 输入类型标签

邮箱:<input type="email"><br>

作用：自动验证输入框的内容，是否 符合邮箱格式

域名:<input type="url"><br>

作用：自动验证输入的URL是否正确

电话:<input type="number"><br>

作用：输入框值允许输入数字

时间:<input type="date"><br>

作用：通过时间器 来选择时间

颜色:<input type="color"><br>

作用：通过取色板来选取颜色