html学习日记part08

本文详细介绍了HTML表单中的各种元素,包括文本输入框、密码输入框、文本域、单选框、复选框、下拉列表框、提交按钮和重置按钮的功能与使用方法,以及label标签的用途。

  用表单与用户交互

  <form></form>

  文本输入框、密码输入框

  <form>

  <input type="text/password" name="名称" value="文本" />

  </form>

1、type:

   当type="text"时,输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

2、name:为文本框命名,以备后台程序ASP 、PHP使用。

3、value:为文本输入框设置默认值。(一般起到提示作用)

文本域,支持多行文本输入

<textarea  rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

2cols :多行输入域的列数

3rows :多行输入域的行数

4、在<textarea></textarea>标签之间可以输入默认值

使用单选框、复选框,让用户选择

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

   当 type="radio" 时,控件为单选框

   当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序PHP使用)

3、name:为控件命名,以备后台程序 ASP、PHP 使用

4、checked:当设置 checked="checked" 时,该选项被默认选中

同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

使用下拉列表框,节省空间

<select>

  <option value="提交值">显示值</option>

  ....

  <option value="提交值" selected= "selected">显示值</option>

</select>

selected="selected"

设置selected="selected"属性,则该选项就被默认选中。

  在<select>标签中设置multiple="multiple"属性,就可以实现多选功能

 

使用提交按钮,提交数据

<input   type="submit"   value="提交">

type:只有当type值设置为submit时,按钮才有提交作用

value按钮上显示的文字

使用重置按钮,重置表单信息

<input type="reset" value="重置">

type:只有当type值设置为reset时,按钮才有重置作用

value按钮上显示的文字

 

form表单中的label标签

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

<label for="控件id名称">

你对什么运动感兴趣:<br />
<label for="jog">慢跑</label>
<input type="checkbox" name="checkbox1" id="jog">
<br />
<label for="climb">爬山</label>
<input type="checkbox" name="checkbox2" id="climb">
<br />
<label for="basketball">篮球</label>
<input type="checkbox" name="checkbox3" id="basketball">
<br />

 

转载于:https://www.cnblogs.com/JLU-lp/p/5658087.html

如果你希望 **“PNG Part No.:”、“Customer:”、“Customer code:”** 这三个字段 **在同一行中,并且** **均分宽度**,可以使用 `Flexbox` 布局,让父容器为 `display: flex;`,并为每个子项设置 `flex: 1;`,这样它们就会自动平均分配容器的宽度。 --- ## ✅ 示例代码 ### ✅ CSS 样式 ```css .row { display: flex; width: 100%; gap: 10px; /* 三列之间的间距 */ margin-bottom: 15px; } .col { flex: 1; /* 均分宽度 */ display: flex; align-items: center; } .col input[type="text"] { flex: 1; padding: 4px; box-sizing: border-box; } .col label { white-space: nowrap; margin-right: 10px; font-weight: bold; } ``` ### ✅ HTML 结构 ```html <!-- 一行中的三列:均分宽度 --> <div class="row"> <!-- PNG Part No. --> <div class="col"> <label>PNG Part No.:</label> <input type="text" /> </div> <!-- Customer --> <div class="col"> <label>Customer:</label> <input type="text" /> </div> <!-- Customer code --> <div class="col"> <label>Customer code:</label> <input type="text" /> </div> </div> ``` --- ## ✅ 效果说明 | 元素 | 说明 | |------|------| | `.row` | 使用 `display: flex;`,使子元素在同一行排列 | | `.col` | 使用 `flex: 1;`,确保每个字段均分宽度 | | `gap: 10px;` | 控制三列之间的间距,使布局更美观 | | `<input>` 使用 `flex: 1;` | 确保输入框填满剩余空间 | --- ## ✅ 可选扩展:响应式布局 如果你希望在小屏幕上自动换行,可以使用媒体查询: ```css @media (max-width: 768px) { .row { flex-direction: column; } } ``` 这样在小屏幕上,三列会自动垂直排列。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值