HTML04-form表单

1.form标签：包含很多表单控件，表单控件可以允许用户输入数据并通过form标签传递这些数据到后端
基本语法：<form action="数据传输的地址" method="发送数据的方法">
<input >
                        </form>
1）method属性：
   1.post :数据通过请求体传递，在网址后面看不见数据。
   缺点：数据传输没有get快
   优点：数据在请求体相对安全，传输数据几乎没有显示
   enctype属性：
   2.get：请求（默认）数据以查询参数的方式传递。（默认方式可省略）
   优点：数据传输比较快
                        缺点：直接能在网址看见数据，传输数据大小有限制，只能传递字符串
2)input 标签：接受输入的数据
基本语法：<input type="" name="">
基本属性：
                1.type :决定input标签的形式（默认text文本模式）
   number：数字输入框
   min 最小值 max最大值 step 是右边按钮递增步长（3个属性右边按钮才有效）
   password:数据以密文方式输入
submit ：提交按钮，点击可以吧数据通过name传递到后端
   search ：搜索输入框
   button : 普通按钮，没有任何的功能
   reset :重置
radio:单选按钮必须要设置value 值，name属性必须一致，既能实现单选
   checked属性默认选中（用于单选或多选）

<input type="radio" value="男" name=“sex”>
<input type="radio" value="女" name=“sex”>

checkbox：多选按钮，必须设置value值，name属性设置一致

<input type="checkbox" value="book" name="like">
<input type="checkbox" value="movie" name="like">
<input type="checkbox" value="game" name="like">

email邮箱输入框，如果输入不是邮箱的格式，则会有提示
tel电话号码属性，结合patten属性使用
   url 网址格式
   color 颜色
   range 显示范围必须要设置一个最大值最小值

<!--可以在指定范围内选择值，step为每次滑动的步长，默认为1-->
<input type="range" name="range" min="0" max="100" step="10">

hidden 输入框是隐藏状态，网页上看不见
date 选择日期，time选择时间，month 选择月，week周 date-lock 年-月-日-时

<!--date 最小可选日期，最大可选日期，默认日期-->
<input type="date" min="2000-01-01" max="2030-1-1" value=“2022-10-10”><!--week-->
<input type="week" min="2000-W02" max="2030-W50" value=“2022-W02”>

2.name:
3.maxlength:最大输入字符，超过则不能输入
4.placeholder:输入内容为空的时候，显示提示文字
5.readonly:输入框是只读，只能看，不能输入，元素可以选择
6.disable ：禁用，元素是灰色，不能选择
                7.value：显示值（内容）
   8.patten：可以输入一个正则表达式
9.required:必须填写属性（不常用）
                10.autofocus:页面加载时自动获取焦点

3） 1.<fieldset> 标签块级标签，表示表单控件的集合
disabled属性，可以让包裹的表单控件都是灰色的不可用
name 设置组件的名称
2. <legend>标签设置fieldset控件的标题，通常在filedset的第一个元素，会嵌入到field set左上角。
3.<label> 表单控件的文字说明，一般用于form表单里面

<fieldset>
<legend>个人信息</legend>
<p><label>姓名：</label><input type="text" name="name"></p>
<p><label>性别：</label><input type="radio"value="woman" name ="sex" > 女</input><input type="radio"value="man" name ="sex" > 男</input>
<!--label 属性 和for 联用的重要用法： 可以扩大选择的范围方法1:运用for 标签和input标签关联<input type="radio"value="woman" name ="sex" id="w"><label for="w"> 女 </label></input>方法2:直接包裹input标签<label><input type="radio"value="man" name ="sex" > 男</input> </label>-->
</p>
</fieldset>

4）button 标签：表示一个普通的按钮
type属性 button

<button> 提交 </button>
<!--button 标签可以放在form标签的外面
type的按钮的类型 ： 1.submit（提交form表单的数据）2.reset (重置表单数据为初始状态3.button (普通按钮没有任何行为） 4，disable （禁用模式）5. name 按钮名称，提交数据的时候，以name=value的形式提交（要配合value）6.form  按钮关联form表单，值是form 表单的id属性，如果省略默认关联在父表单--><!--button 不在form表单中 用form关联 则会提交form1的值-->
<form name="个人信息" id="form1"></form>
<button form="form1">提交</button>

4）select标签：下拉菜单标签
   基本语法：
   省：<select name="province">
<option value="sc">四川</option>
                <option selected>江苏省</option> //默认值
                <option value="sc">四川</option>
           </select>
* option属性：1)value值后台数据选中的值
2）selected：默认选中项
   3）multiple：多选
4）size：可以显示行数配合multiple使用

<select name=“province” required multiple size=“8”><option>四川</option><option selected >江苏</option><!--分组标签--><optgroup label= "南"> <option>广东</option><option>上海</option><optgroup label= "北"> <option>北京</option>
</select>

5）datalist 容器标签通常用于input的输入提示
   基本语法：<datalist>
   //value 标签显示选中的值，label标签为值的说明
<option value="" label="">
                                         <option value="">
                                         <option value="">
  </datalist>

<!--用id 和list 标签进行关联-->
<input list="data" type="text"><datalist id="data"><option value="a" label=""><option value="b" label=""><option value="c" label=""></datalist>

6）textarea多行文本标签默认可以拖拽包裹的内容是value值
基本语法：<textarea placeholder="个人简介"></textarea>
基本属性：rows 文本框的高度单位是行
cols 文本框的宽度单位是字符
maxlength :最大输入的字符
7）progress 表示进度条行内元素（不常用）
基本语法：<progress max="100" value= "30"> 50%</progress>

8）details折叠标签

HTML04-form表单相关推荐

form表单提交前进行ajax或js验证，校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
form表单提交编码的问题
浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urle ...
js异步提交form表单的解决方案
1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span sty ...
SpringMVC的form：form表单的使用
为什么要使用SpringMVC的form:form表单,有两个原因:一是可以更加快捷的完成表单的开发,比如会替你做好数据类型装换等本来需要你自己动手的工作.其次就是能够更加方便的实现表单回显. 首先要 ...
Form表单提交前进行JS验证的3种方式
1. 提交按钮的onclick事件中验证 <script type="text/javascript"> function check(form) { ...
form表单的reset
form表单的reset 重置表单(把表单的所有输入元素重置为它们的默认值.): 1.使用reset按钮,条件reset按钮必须在form表单内部. 2. <input id="But ...
HTML中的form表单有一个关键属性 enctype
HTML中的form表单有一个关键属性 enctype＝application/x-www-form-urlencoded 或multipart/form-data. 1.enctype=" ...
一个接口同时支持 form 表单、form-data、json 的优雅写法
欢迎关注方志朋的博客,回复"666"获面试宝典来源:https://juejin.cn/post/7054441239839506446 最近重写个项目遇到个比较棘手的问题,老项 ...
react antd form 表单清空
关于react_antd_desgin的学习这两天也是获取到的知识零零散散,大多在网上也能获取的到,所以隔了很长的时间,没有编写关于react相关的文章.今天之所以写也是因为公司中秋节放假,在郑州,窗 ...
flask与简单的form表单
flask与简单的form表单文章目录 flask与简单的form表单视频代码 flask html 视频 https://www.bilibili.com/video/BV17W41177oE ...

HTML04-form表单

HTML04-form表单相关推荐

最新文章

热门文章