HTML+CSS宝典 HTML进阶表单元素

Go to comments

HTML+CSS宝典 HTML进阶表单元素

表单元素涉及到一系列元素，主要用于收集用户数据

一、input元素

input元素主要做文本输入，可能是文本框，可能是日期选择框，也可能是一个滑动块，这些都统称为输入，input 单词本身也是输入的意思，输入的不一定是文本，准确的说是输入框

input 是一个空元素，没有结束标记

type 属性，表示这个输入框的类型

value 属性，表示输入框的值

placeholder 属性，显示提示的文本，文本框没有内容时显示

`1`	`<input` `type="text"` `value="请输入账号">`

不写 value 属性，写 placeholder 属性

`1`	`<input` `type="text"` `placeholder="请输入账号">`

type 属性有很多的取值，下面是经常用到的取值

type = "text"

表示普通文本输入框，在不同的浏览器显示的样式可能有些不一样

type="password"

表示密码框，在密码框 value 属性通常不会写（不是不能写），和加密一点关系都没有，不能加密，作用是防止背后有人偷窥的

type="date"

表示日期选择框，有兼容性问题，新版本浏览器一般都支持，用的时候谨慎，日期选择的样式不能更改，这也是可替换元素的特点

type="search"

表示为搜索框，一般在手机上用的比较多一点，手机键盘右下角的键不在是换行，变成了搜索按钮，

也有兼容性问题，

在电脑上用没什么区别，文本框后面多一个 x

type="range"

滑块，滑动的值要靠js来读取，range表示范围（选中一个范围），

使用 range 类型，有些属性是可以设置的

min 设置最小值为 0

max 设置最大值为 5

`1`	`<input` `type="range"` `min="0"` `max="5">`

这个不太常见，而且要配合js使用

type="color"

颜色选择，也要配合js使用

`1`	`<input` `type="color">`

type="number"

表示数字输入框，现在用的越来越多了，它只能输入数字，

今后做商城输入购物的数量，就用这个东西，有一些兼容性问题，老浏览器不支持

`1`	`<input` `type="number">`

还有一些属性

min 表示输入的最小值

max 表示输入的最大值

`1`	`<input` `type="number"` `min="0"` `max="10">`

number类型里还有一个步进属性step，表示每次输入多少，默认是1可以改成2

`1`	`<input` `type="number"` `min="0"` `max="10"` `step="2">`

type="checkbox" 表示多选框

1. checked 属性表示默认选中（checked是布尔属性）

2. 要有一个name属性，根据name分组

1吃 <input name="aihao[]" type="checkbox" value="吃" checked>
2 
3喝 <input name="aihao[]" type="checkbox" value="喝">
4 
5玩 <input name="aihao[]" type="checkbox" value="玩" checked>
6 
7乐 <input name="aihao[]" type="checkbox" value="乐">

type="radio" 单选框

1<h1>性别:</h1>
2 
3<input name="gender" type="radio" value="female" checked="checked"> 女
4 
5<input name="gender" type="radio" value="male"> 男

ps：

dedecms系统中的栏目属性

1<h1>栏目属性：</h1>
2 
3<input name="ispart" type="radio" id="radio" value="0" checked="checked"/> 最终列表栏目（允许在本栏目发布文档，并生成文档列表） 
4 
5<input name="ispart" type="radio" id="radio" value="1" /> 频道封面（栏目本身不允许发布文档）
6 
7<input name="ispart" type="radio" id="radio" value="2" /> 外部连接（在"文件保存目录"处填写网址）

type="file" 选择文件要上传

`1`	`<input` `type="file"` `name="upfile">`

type="hidden"

不显示在页面上，但他的值会被提交到服务器

这些常见的type属性都属于input元素，value属性、placeholder属性都是有的，只是有些情况placeholder属性我们看不见，

比如在单选框里写placeholder属性，写了没什么用

1<h1>性别:</h1>
2 
3<input name="gender" type="radio" value="female" checked="checked" placeholder="请输入账号" > 女
4 
5<input name="gender" type="radio" value="male"> 男

一般使用输入框的时候，placeholder属性能显示

`1`	`<input` `type="number"` `placeholder="输入数字">`

placeholder属性，显示提示的文本，在文本框没有内容时显示

`1`	`<input` `type="text"` `placeholder="请输入账号">`

百度搜索 input mdn

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input

input元素除了做输入框之外，还可以做按钮，只不过这种方式有点过时了

type="reset" 重置按钮

`1`	`<input` `tyle="reset"` `value="重置">`

type="button" 普通按钮，需要配合js和后端语言，静态页面写样式，尽量用botton

`1`	`<input` `tyle="button"` `value="普通按钮">`

type="submit" 提交按钮

`1`	`<input` `tyle="submit"` `value="提交">`

type="image" 图片按钮

src属性定义图片来源

alt定义替代文本

height和width属性定义图片大小

`1`	`<input` `type="image"` `name="imageField"` `src="images/button_ok.gif"` `border="0"` `/>`

二、select元素

select元素表示"下拉列表选择框"

1. 通常和 option 元素配合使用，option表示下拉列表里面的选项

2. selected="selected" 默认选中，selected是布尔属性，在HTML5里面可以简写

1请选择城市：
2 
3<select name="city" id="">
4 
5  <option value ="成都">成都</option>
6  <option value ="北京">北京</option>
7  <option selected="selected" value ="哈尔滨">哈尔滨</option>
8 
9</select>

select元素里面还可以进行分组，

1. 分组用 optgroup 元素，

2. label属性给分组一个名字

01<h1>请选择你最喜欢的主播：<h1>
02 
03  <select name="city" id="">
04 
05  <optgroup label="才艺表演">
06    <option value ="冯提莫">冯提莫</option>
07    <option value ="朴妮唛">朴妮唛</option>
08    <option selected value ="尹素婉">尹素婉</option>
09  </optgroup>
10 
11  <optgroup label="游戏主播">
12    <option value ="WETed">WETed</option>
13    <option value ="infi">infi</option>
14    <option selected="selected" value ="th000">th000</option>
15  </optgroup>
16 
17</select>

multiple属性表示多选，按住键盘的 ctrl键可以选择几个

01<h1>请选择你喜欢的主播：</h1>
02 
03<select multiple name="city" id="">
04 
05  <optgroup label="才艺表演">
06    <option value ="冯提莫">冯提莫</option>
07    <option value ="朴妮唛">朴妮唛</option>
08    <option selected value ="尹素婉">尹素婉</option>
09  </optgroup>
10 
11  <optgroup label="游戏主播">
12    <option value ="WETed">WETed</option>
13    <option value ="infi">infi</option>
14    <option selected="selected" value ="th000">th000</option>
15  </optgroup>
16 
17</select>

三、textarea元素

这个元素专业的说法叫做文本域，也叫做多行文本框，

有的时候要填写用户的简介，或是书籍的简介内容比较多，用单行的input元素不太合适，我们可能需要多行的文本框用 textarea 元素

rows属性表示有多少行，文字能排成多少行

cols属性表示横向上有多少个文字（按照英文个数计算）

`1`	`<textarea` `rows="10"` `cols="30"` `name=""` `id=""></textarea>`

不建议使用rows、cols来控制宽高，建议用CSS来控制

1<textarea style="width:500px;height:300px;" name="" id="">
2  默认显示一些内容，
3  这里是一个换行
4</textarea>

textarea是一个可替换元素，

是一个行块盒，

里面的默认文字是没有空白折叠的

通常不会在静态页面里面填写默认内容，通常用placeholder属性

`1`	`<textarea` `style="width:500px;height:300px;"` `placeholder="请输入简介"` `name=""` `id=""></textarea>`

四、button按钮元素

用input元素也可以做按钮，但更多的时候我们使用button元素，如果要获得最大的兼容性，肯定使用input的来做按钮

但是button是HTML4.01出来的，历史悠久了，现在绝大部分浏览器99.9%兼容，所以除非有特别要求，按钮尽量使用button元素

因为button元素就是专门来做按钮的，语义button就是来做按钮的

button元素有一个type属性，表示按钮的类型，

类型有三种

reset

submit 默认值是submit

button

`1`	`<button` `style="submit">按钮</button>`

按钮的文本不是value属性值，文本是元素的内容，

元素内容就很灵活了，按钮可以写文本，也可以写其他的元素，

比如p元素，img元素，甚至加一个视频都可以，可以做出更加丰富的效果。

建议type设置成button，方便后和其他技术进修结合

`1`	`<button` `type="button">按钮</button>`

如果用图片按钮

input元素

`1`	`<input` `type="image"` `src="图片url">`

用button元素

1<button>
2  <img src="图片url" alt="">
3</button>

五、配合表单元素的其他元素

1、label元素

label是一个普通元素，它不是什么可替换元素，也不是表单元素（通常配合表单元素），通常配合单选和多选框来使用

label表示标签，可以认为表示的是表单元素的标签（标签文本），可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素的id值

第一种关联方式，显示关联

1. id="raFemale" 表单的id值

2. for="raFemale" label元素关联表单的id值

1请选择性别：
2 
3<input type="radio" name="gender" value="female" checked id="raFemale">
4<label for="raFemale">女</label>
5 
6<input type="radio" name="gender" value="male" id="raMale">
7<label for="raMale">男</label>

第二种方式，隐式关联

用label标签把表单和标签文本包起来

1请选择性别：
2 
3<label>
4  <input type="radio" name="gender" value="female" checked> 女
5</label>
6 
7<label>
8  <input type="radio" name="gender" value="male"> 男
9</label>

2、datalist 数据列表

该元素本身不会显示到页面，通常用于和普通文本框配合使用

datalist 的默认样式表是 display: none，是不显示到页面上的，显示需要把datalist和普通文本框关联起来

怎么关联呢？

1. 通过datalist元素的id来关联

2. input元素文本框，通过list属性来关联id，

这样在文本框输入的时候，就会提示我们

01请输入常用的浏览器：
02 
03<input type="text" list="userAgent">
04 
05<datalist id="userAgent">
06  <option value="chrome">谷歌浏览器</option>
07  <option value="IE">IE浏览器</option>
08  <option value="Oprea">欧朋浏览器</option>
09  <option value="Safarf">苹果浏览器</option>
10  <option value="FireFox">火狐浏览器</option>
11</datalist>

请输入常用的浏览器：

3、form元素

from元素非常非常重要，

作用是，通常情况下会将整个表单元素（什么文本框、下拉列表、包括按钮），整个表单元素放置到form元素内部，from元素其实就是用来，包含其他表单元素的

整个表单元素放置到form元素内部的作用？

当提交表单时（怎么提交表单？提交表单有很多很多种办法，js里面还有一些办法来提交表单，这里只说from的办法）

当点击提交按钮的时候，会将from元素内部的表单内容，以合适的方式，提交到服务器，from元素对开发静态页面，没有什么意义

from元素里面属性配置

1. action="" 表示提交给谁来处理，如果不写就是提交给当前页面

2. method="get" 表示提交方法（通常有两种get、post）

3. 然后里面的表单元素，要求必须写上name属性，要跟服务器联动，需要把name属性写上

01<form action="https://www.baidu.com" method="get">
02 
03  <p><input type="text" name="loginId"></p>
04 
05  <p><input type="password" name="loginPwd"></p>
06 
07  <p>
08    <select name="city">
09      <option value="1">成都</option>
10      <option value="2">重庆</option>
11      <option value="3">北京</option>
12      <option value="4">哈尔滨</option>
13    </select>
14  </p>
15 
16  <p><button>提交</button></p>
17 
18</form>

3、fieldset元素

fieldset 相当于表单分组，把一些表单分成一个组，从逻辑上来分组，

field表示的是字段的意思，可以认为一个表单项就是一个字段，就是一个文本框就是一个字段，

set表示集合，就是有很多个的意思，多个字段的集合就可以认为分成一个组,

fieldset还有一个子元素legend，可以认为是分组的标题

比如，一个div就是整个表单（不用form元素）

01<div>
02  <h1>修改用户信息</h1>
03 
04  <fieldset>
05    <legend>账号信息</legend>
06    <p>用户账号：<input type="text" name="loginID"></p>
07    <p>用户密码：<input type="text" name="loginPWD"></p>
08  </fieldset>
09 
10  <fieldset>
11    <legend>基本信息</legend>
12    <p>用户姓名：<input type="text" name="loginNAME"></p>
13    <p>所在城市：
14      <select name="city">
15        <option value="1">成都</option>
16        <option value="2">重庆</option>
17        <option value="3">北京</option>
18        <option value="4">哈尔滨</option>
19      </select>
20    </p>
21  </fieldset>
22 
23  <p>
24    <button>提交</button>
25  </p>
26</div>

可以用其他元素分组，但是fieldset可以从语义上的意思就是分组

4、表单状态

每一个表单项，不管是文本框、下拉列表、多行文本框、还是按钮，都有一些状态

状态有两种：

1. readonly

2. disabled

readonly

这种表单的状态叫只读状态，表示是否只读，这是一个布尔属性，这个表单只能读不能改动

`1`	`<input` `type="text"` `value="只读状态，不能改动"` `readonly>`

它的显示效果和正常的表单没有什么区别的，不会改变表单样式，

通常文本框里面会有这样一个状态叫readonly，文本框可以填写用readonly属性，按钮那些就不管了

disabled

另外一种状态是 disabled 表示是否禁用，也是一个布尔属性，表示是否禁用，会改变表单显示样式

1<p>
2    <input type="text" value="禁用" disabled>
3</p>

disabled属性是通用的，所有的表单都可以用

firsetTime 20220129