HTML输入标签,下拉列表标签,文本域标签

本文深入探讨了HTML表单中的各种组件,包括输入框、密码框、选择按钮、复选框、文件上传、隐藏组件、按钮等,并详细介绍了如何在实际项目中应用这些组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

输入标签

输入名称:<input type="text" name="user" value="" /><br />
<!--type="text"表示输入的是一个文本内容--> 

输入密码:<inpu type="password" name="psw" /><br /> 

<!--type="password"表示输入的是密码框,里面的内容会使用小黑点来代替--> 

选择性别:
<input type="radio" name="sex" value="nan" /><input type="radio" name="sex" value="nv"checked="checked" /><br /> 

<!--type="radio" 表示这是一个选择按钮,
name="sex"表示在同一个选择组里面。选择按钮在同一个选择组里面,只可以选择一个。
checked="checked"表示默认选择。
--> 

选择技术:
<input type="checkbox" name="tech" value="java" />JAVA
<input type="checkbox" name="tech" value="html" />HTML
<input type="checkbox" name="tech" value="css" />CSS
<!--
type="checkbox"表示这是一个勾选的框。
和type="radion"的不同之处,checkbox可以选择勾选多个。
-->



选择文件
<inputtype="file" name="file" /><br />
<!--
默认会打开选择文件
-->

一个图片:
<input type="image" src="img/11.jpg" />
<!-- 就是个提交按钮,和submit功能一样。会提交数据。
注意:如果和type="submit"在一个表单内,会提交两次数据。要小心
-->



隐藏组件:<input type="hidden" name="myke" value="myvalue" />
<!--
type="hidden"该输入框不会显示在网页上面。但是确实存在,只看不见。
用于:数据不需要客户端知道,但是可以将其数据提交服务端。--> 

一个按钮:
<input type="button" value=" 有个按钮 " onclick="alert('有个阿牛')" />
<!--自定义一个按钮-->

<input type="reset" value=" 清除数据 " />
<!--在<form>表单里面设置这一个属性,点击的就会把整个文本框的内容清除-->
<input type="submit" value=" 提交数据" />
<!--
在<form>表单里面设置这一个属性,点击的就会把整个文本框的信息提交给指定的路径
-->

下拉列表标签

<select name="country">
    <option value="none">--选择国家--</option>
    <option value="usa">美国</option>
    <option value="en">英国</option>
    <option value="cn" selected="selected">中国</option>
</select>
<!--
    <option> 表示问选择值
    selected="selected"默认选择的值

-->

文本域标签

<textarea name="text"></textarea>
<!--文本域标签,可以输入更多的信息-->

提示
如果要给服务端提交数据,表单中的组件必须有name和value属性。
用于给服务端获取数据方便。

没有单独封闭的标签有<br /> <hr /> <input />这三个较为常见,表单的组件中name和value是键值对,必须至少有其中一个,这样才会有效的提交数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值