表单标签

什么是表单
表单就是专门用来收集用户信息的
什么是表单元素
是特殊的标签，在浏览器中所有的表三标签都有特殊的外观和默认的功能
作用：用于收集用户信息，让用户填写或选择相关的信息
格式：

<form>所有的表单内容，都要写在form标签里面
</form>

input标签

明文输入框
- 作用: 用户可以在输入框内输入内容
- 账号:<input type="text"/>
暗文输入框
- 作用: 用户可以在输入框内输入内容
- 密码:<input type="password"/>
给输入框设置默认值
- 账号:<input type="text" value="123"/>
- 密码:<input type="password" value="123"/>
规定输入字段中的字符的最大长度
- 账号: <input type="text" name="fullname" maxlength="8" />

<form><!--明文输入框-->账号:<input type="text"><br><!--暗文输入框-->密码:<input type="password"><br><!--给输入框设置默认值-->账号:<input type="text" value="城北徐公"><br>密码:<input type="password" value="244466666"><br>
、、、</form>

单选框
注意点:
1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值
2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性
3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐不要省略取值

    性别:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx" >保密<br>

多选框

爱好：
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<input type="checkbox" checked="checked">足浴

注意点：
指定radio和checkbox默认值，前提是同一组你内容必须设置相同的name属性
按钮
- 作用：定义可点击的按钮
- <input type="button" value="点我丫" />
图片按钮
- 作用:定义图像形式的提交按钮
重置按钮
- 作用: 定义重置按钮。重置按钮会清除表单中的所有数据
- 注意事项:
  这个按钮不需要写value自动就有“重置”文字，reset只对form表单中表单项有效果
提交按钮
- 作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面
- <input type="submit" />
- 注意事项:
  这个按钮不需要写value自动就有“提交”文字，要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性
  <–默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输(学到Ajax再理解)–>
隐藏域
- 作用：定义隐藏的输入字段
- <input type="hidden">
取色器
- <input type="color">
日期选择器
- <input type="date">
lable标签
作用：lable标签不会呈现任何特殊效果，他可以实现点击文字时也能让输入框聚焦

数据列表

作用：给输入框绑定待定选项
如何给输入框绑定待选列表
- 搞一个输入框
- 搞一个datalist列表
- 给datalist列表标签添加一个id
- 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性

请输入你的爱好: <input type="text" list="cars"><datalist id="lover"><option>牧童</option><option>山海</option><option>Tom</option><option>Mary</option><option>侬么得冰阔乐</option>
</datalist>

输入待选框的内容会有提示，如输入T，会提示有Tom选项

多行文本框（文本域）

作用: textarea标签用于在表单中定义多行的文本输入控件
cols属性表示columns“列”, 规定文本区内的可见宽度
rows属性表示rows“行”, 规定文本区内的可见行数
格式:<textarea cols="30" rows="10">默认</textarea>
注意点:
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
4.默认情况下输入框是可以手动拉伸的

   <!--禁止手动拉伸-->
<style type="text/css">textarea{resize: none;}
</style>

下拉列表

作用: select标签和ul、ol、dl一样，都是组标签. 用于创建表单中的待选列表, 可以从选择某一个带选项
格式:

选择以下:
<select><option>除了</option><option>死亡</option><option>其余</option><option>一切</option><option>皆是</option><option>擦伤</option><option>skr~</option>
</select>

给下拉列表设置默认值
和radio、checkbox一样select也可以设置默认值, 通过selected属性设置
我的世界很小所以所有小事都不小

给下拉列表添加分组

<select><optgroup label="吃的"><option>蛋糕</option><option>冰淇淋</option><option>巧克力</option></optgroup><optgroup label="喝的"><option>茶</option><option>咖啡</option></optgroup><option selected="selected">玩的</option>
</select>

04.HTML基础-表单标签基础标签相关推荐

【Educoder】HTML答案（HTML入门——基础、HTML入门——基本标签、HTML——表单类的标签）
文章目录 HTML入门--基础初识HTML:简单的Hello World网页制作 HTML结构:自我简介网页 HTML入门--基本标签创建第一个 HTML 标签创建 h2-h6标签创建 p 标 ...
HTML标签汇总（基础表单部分）
HTML标签汇总(基础表单部分) <form> 用于用户输入创建的HTML表单表单包含<input>元素,比如文本字段,复选框,单选框,提交按钮等等表单还可以包含menus ...
form表单的基础了解
form表单的基础了解一.表单作用二.from表单涉及到的基础表单元素 1.input标签 1.1html5之前的input标签的相关属性 1.2补充html5对input中type属性的补充: ...
表单之input标签
表单之input标签文章目录表单之input标签视频代码视频 https://www.bilibili.com/video/BV1gf4y1m7No?from=search&seid ...
表单之label标签
表单之label标签文章目录表单之label标签视频代码视频 https://www.bilibili.com/video/BV16s411N7sM?from=search&seid ...
Bootstrap系列 -- 11. 基础表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...
表单设计中标签的布局方式有哪些
表单设计的标签本质上是一个与用户对话的起点,了解表单设计的标签的设置规则后,需要关注标签的布局方式,因为网页表单设计是影响用户如何回答问题的关键.表单设计标签的布局方式主要包含三种,测试数据展示,用户 ...
基于elementUI封装了基础表单组件
开头先BB两句 elementUI的表单组件,自带表单验证规则.虽然已经很方便了,但是我还是想封装一下. 通常用到的表单类型,主要包括:Radio 单选框,输入框,下拉框. 我封装了一个基础组件.把这 ...
form表单之input标签
表单标签<form> 表单用于向服务器传输数据. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select.fieldse ...
Educoder/头歌JAVA——HTML：表单类的标签
目录第1关:表单元素--文本框相关知识第2关:表单元素--密码框相关知识第3关:表单元素--单选框相关知识第4关:表单元素--多选框相关知识第5关:表单元素--checked属性相 ...

04.HTML基础-表单标签基础标签

表单标签

input标签

数据列表

多行文本框（文本域）

下拉列表

04.HTML基础-表单标签基础标签相关推荐

最新文章

热门文章