表单元素

表单：

表单就是专门用来收集用户信息的

元素:在HTML中 标签/标记/元素都是指HTML中的标签

常见的表单元素
input标签, input标签有一个type属性, 这个属性取值的不同就决定了input标签的功能和外观不同

 

<form action="http://www.baidu.com">
    <!--明文输入框-->
    账号:<input type="text" name="aa"><br>
    <!--暗文输入框-->
    密码:<input type="password" name="bb"><br>
    <!--定义一个普通按钮作用:配合JS完成一些操作-->
    <input type="button" value="我是按钮" onclick="alert('lnj')">
    <!定义一个图片按钮 作用:配合JS完成一些操作-->
    <input type="image" src="images/register.jpg" onclick="alert('lnj')">
    <!--
    定义重置按钮
    作用:清空表单中的数据
    注意点:
    重置按钮有默认的按钮标题, 默认叫做 重置
    也可以通过value属性来修改默认标题
    -->
    <input type="reset" value="清空">

    <!--
    定义提交按钮
    作用:将表单中的数据提交到远程服务器
    注意点:
    要想把表单中的数据提交到远程服务器,必须满足两个条件
    1.告诉表单需要提交到哪个服务器
    可以通过form标签的action属性来告诉表单,需要提交到那个服务器
    2.告诉表单,表单中的哪些数据需要提交,通过value属性告诉表单
    -->
    <input type="submit">

    <!--
    隐藏域
    作用: 用于悄悄咪咪的收集用户的一些数据, 隐藏域是不会出现在界面中的
    -->
    <input type="hidden" name="cc" value="it666">
<!--
    可以自动校验输入的内容是否符合邮箱的格式
    -->
    邮箱:<input type="email"><br>
    <!--
    可以自动校验输入的内容是否是URL地址
    -->
    域名:<input type="url"><br>
    <!--
    输入框中只能输入数字
    -->
    电话:<input type="number"><br>
    <!--
    可以通过日历来选择时间
    -->
    时间:<input type="date"><br>

    <!--
    可以通过取色板来选择颜色
    -->
    颜色: <input type="color"><br>

    <input type="submit">
</form>
</body>
</html>

Label标签
1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦,
 那么就需要让文字和输入框进行绑定
2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签

3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可  <form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

datalist标签
作用: 给输入框绑定待选项
datalist格式:
<datalist>
    <option>待选项内容</option>
</datalist>
如何给输入框绑定待选列表
1.搞一个输入框
2.搞一个datalist列表
3.给datalist列表标签添加一个id
4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

select标签
作用: 用于定义下拉列表
格式:
<select>
    <optgroup label="分组名称">
        <option>列表数据</option>
    </optgroup>
</select>
注意点:
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
2.可以通过给option标签添加一个selected属性来指定列表的默认值
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

textarea标签
作用: 定义一个多行输入框

格式:
<textarea>
</textarea>

注意点:
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
4.默认情况下输入框是可以手动拉伸的

placeholder
<input type="text" placeholder="请输入用户名">
用于指定input输入框的占位符号, 特点: 用户输入数据之后占位符号会自动消失
autofocus
<input type="text" autofocus>
用于指定默认让哪一个输入框获取焦点, 特点: 不能同时让多个输入框获取焦点
multiple
<input type="file" multiple>
type="file" 就是告诉浏览器, 当前的input输入框是需要选择文件
特点: 默认情况下只能选择一个文件
如果在input标签中添加一个multiple属性, 就可以让input同时选择多个文件

autocomplete
<input type="text" autocomplete="off">
记录用户提交过的数据, 注意点: input输入框必须有name属性才能记录, 并且只有提交之后才能记录
required
<input type="text" required>
强制用户输入内容, 如果没有输入内容不能提交表单

accesskey
<input type="text" accesskey="s">
可以通过配置快捷键让输入框获取焦点
快捷键就是 Alt + 指定的符号

ps:

1.在单选框和多选框中,所有的项目的name必须一致 在表单标签中,除了按钮标签以外的标签,都可以通过value来指定需要提交到服务器的数据