1.3 HTML forms

一、什么是表单

表单在网页中主要负责数据采集功能

①表单域： <form name="" method="get/post" action=""></form>

②表单控件 ： <input type="text" value=""/>

③提示信息

二、表单的创建

<form method=“get或者post”  action=“向何处发送表单数据”> 
<!-- 创建表单 -->
<input  type=“” placeholder=“” name=“” value=“”/> <!– 输入框 -->
A.属性   type 定义输入框的类型
a)文本框  type="text“      密码框  type=“password“
b)提交框  type=“ submit“  和 <button>提交按钮</button>  一样
c)按钮框  type=“button“  单纯的按钮
d)重置框  type=“reset”清空的效果
B.属性   placeholder  描述输入字段预期值的简短的提示信息。兼容到IE8以上
C.属性   name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
D.属性   value 值
</form>

<form action="">
    <p><input type="text" placeholder="文本框"></p>
    <p><input type="password" placeholder="密码"></p>
    <p><input type="submit" value="提交框"></p>
    <p><button>提交按钮</button></p>
    <p><input type="button" value="按钮框"></p>
    <p><input type="reset"></p>
</form>

效果图

三、Get和Post的区别

Form当中method的post和get的区别？

1. get是从服务器上获取数据，post是向服务器传送数据。

2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB

5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

四、H5新增的表单type属性值

<form>
    <p>
    邮件:<input type="email" multiple>
    </p>
    <p>
        用于用户输入和编辑URL:<input type="url">
    </p>
     <p>用于让用户输入和编辑URL
         <input type="url" name="url" id="b" required placeholder="填写地址">
    </p>
    <p>数字： 
        <input type="number" name="dianh" id="c" required placeholder="输入数字" max="11" step="3">
    </p>
    <p>单行滑块控件
        <input type="range" step="3" min="10" max="20">
    </p>
</form>

 <form action="" method="get">
        <p>日：<input type="date" name="" id=""></p>
        <p>月：<input type="month" name="" id=""></p>
        <p>年：<input type="week" name="" id=""></p>
        <p>时间： <input type="time" name="" id=""></p>
        <p>本地时间：<input type="datetime-local" name="" id=""></p>
        <p>世界时间：<input type="datetime" name="" id=""></p>
    </form>

五、H5新增加的表单验证属性

<!-- 取消验证novalidate，必须给form标签 -->
    <form action="" novalidate>
        <p>文本框：
            <!-- required验证输入不能为空，任何一个input都可以 -->
            <input type="text" name="" id="" required>
        </p>
        <p>密码框：
            <!-- placeholder输入框没有输入信息的默认显示 -->
            <input type="password" name="" id="" placeholder="请输入密码">
        </p>
        <p>邮件：
            <!-- autofocus打开页面时，该控件自动获得鼠标焦点，一个页面只允许有一个 -->
            <input type="email" name="" id="" autofocus>
        </p>
        <p>手机号：
            <!-- maxlength最大长度 -->
            <input type="text" name="" id="" maxlength="11">
        </p>
    </form>

六、H5新增加的表单标签

datalist提供一个事先定义好的列表，通过id与input关联，当在input内输入时就会有自动完成（autocomplete）的功能，用户将会看见一个下拉列表供其选择。

autocapitalize属性：

注：表单元素要必须有name属性。

输入的内容与所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能

只有三种：on/off/""

 <form action="">
        <p><input type="text" list="words" autocapitalize="off" name="浏览器"></p>
        <datalist id="words">
            <option value="谷歌">谷歌</option>
            <option value="火狐">火狐</option>
            <option value="EDGE">EDGE</option>
        </datalist>
        <input type="submit" value="提交">
    </form>

图6-1下拉列表

输出标签

 <form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        <input id="a" type="text">+
        <input id="b" type="text" value="50">=
        <output name="x" for="a b"></output>
    </form>

image-20231108015515901

七、表单新增加标签属性

	标签和属性	说明
1	<fieldset></fieldset>	fieldset表单字段集，相当于一个方框，fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象
2	<legend></legend>	字段集标题 必须要有字段集
3	<label for="box"></label>	label 提示信息标签 for="绑定控件id名"
4	<input type="file"/>	上传文件框 multiple="multiple" multiple属性可实现多选
5	<input type="hidden"/>	隐藏字段对于用户来说通常是不可见的，通常会存储一个默认值，通过js来修改
6	<input type="radio" name=”sex”/>	type="radio"单选按钮 单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。
7	<input type="checkbox" name="like" disabled="disabled" checked="checked"/>	type="checkbox" 多选按钮 name可加可不加 checked="checked"(选中) disabled="disabled"禁用
8	<select><option>北京</option><option>上海</option></select>	下拉菜单
9	<textarea cols="40" rows="5">文本域</textarea>	文本域 cols="字符宽度" rows="行数

1. 表单字段集

<fieldset>
  ssssssss
  <fieldset>
    sssssssss
  </fieldset>
  sss
</fieldset>

图7-1 表单字段集

1. 字段集标题

   <fieldset>
      <legend>sss</legend>
      sssss
   </fieldset>

图7-2 字段集标题

1. label

   提示信息标签，对于表单一般用在单选和多选

   <!--label方法一-->
   <label><input type="radio" name="sex">男</label>
   <!--label方法二 只能用id-->
   <input type="radio" name="sex" id="aa">
   <label for="aa">女</label>

图7-3 label

1. 上传文件

   <input type="file">

图7-4 上传文件标签

1. 单选按钮 圆形

   如果只想选中一个，需要添加一个name属性，name的属性值要是一样的

   <input type="radio" name="nex">男<input type="radio" name="nex">女 

图7-5 单选按钮

1. 多选按钮（复选）正方形

<p>
    <input type="checkbox" disabled="disabled"/>禁用
</p>
    <input type="checkbox" checked="checked"/>默认选中<br>
    <input type="checkbox">

图7-7 多选按钮（复选）正方形

1. 下拉菜单

<select>
    <option>30000-50000</option>
    <option>50000-70000</option>
</select>

图7-8 下拉菜单

1. 多行文本（文本域）

<textarea cols="40" rows="5" >文本域</textarea>

图7-9 文本域

如何让一个输入框默认选中 在标签上添加一个checked属性 checked="checked" 默认选中 当属性名和属性值完全的一样的时候，可以省略为一个属性名 resizw:none; /* 禁止拖动 */

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        textarea{
            resize: none;
        }
    </style>
</head>

<body>
<textarea cols="40" rows="5" >文本域</textarea>
</body>
</html>

图7-10 让一个输入框默认选中

版权声明：本文为CSDN博主「Ein hübscher Kerl.」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 首发原文链接：https://blog.csdn.net/qq_54026286/article/details/129368824

---

END