HTML 表单,输入框,文本域,<label>标签,下拉列表,button按钮

表单

<form> 是一个表单,里面包含表单元素,例如文本表单,密码表单,单选框,复选框,提交按钮,下拉列表等。

表单<from>

<form> 是在最外层,主要向服务器提交数据的功能。

属性说明
accept-charset字符集规定服务器处理的表单字符集
actionURL规定表单向何处发送表单数据
autocompleteon或者off浏览器基于之前键入过的值,应该显示出在字段中填写的选项,实现自动填充
enctype编码格式规定在向服务器发送表单数据之前如何对其进行编码。适用于 method=“post”
methodget或者post规定发送表单数据的http方法
nametext文本规定表单的名称
novalidatenovalidate使用该属性,则提交表单不进行验证

输入框

<input> 表示用户输入数据的文本域,输入框有多种形式,由type属性实现。
该标签没有结束标签。

属性:

属性说明
autocompleteon或者off是否依据以前的输入完成自动输入
autofocusautofocus页面加载时自动获得焦点
checkedcheckedchecked 属性规定在页面加载时应该被预先选定的 <input> 元素。 只针对 type=“checkbox” 或者 type=“radio”。
disableddisabled允许禁用input元素
formform标签的id值规定input元素所属哪一个或者多个form表单
maxnumber规定input元素数值的最大值
minnumber规定input元素数值的最小值
maxlengthnumber规定input元素的最大字符数
nametext规定input元素的名称
placeholdertext规定input输入前的提示信息
readonlyreadonly规定input元素的字段是只读的
requiredrequired规定在提交表单之前必须输入字段
type类型规定input元素的类型
valuetext规定input元素的value值
 <input type="text"><br>
    <input type="submit"><br>
    <input type="button" value="button按钮"><br>
    <input type="radio"><br>
    <input type="checkbox"><br>
    <input type="password"><br>
    <input type="text" placeholder="请输入数据"><br>
    <input type="text" value="这个字段自动默认化"><br>
    <input type="text" readonly="readonly" value="nihao"><br>

显示图片

文本域

<textarea> 标签定义一个文本区域,该标签是一个闭合标签。可以容纳无限数量的文本。

属性:

属性说明
autofocusautofocus当页面加载时自动获得焦点
disableddisabled禁用文本区域
formform表单的id值规定属于一个或多个的表单
maxlengthnumber规定文本区域的最大字符数
nametext规定文本区域的名称
placeholdertext定义一个简短的提示,两个标签不能有空格,不然不会显示
readonlyreadonly规定文本只读
requiredrequired在表单提交时文本域必须写
wraphardsoft当文本达到最大值时怎样换行

通过css样式的resize属性的none值解决默认伸缩样式。

<label>标签

<label>标签可以为input定义标注,该标签没有任何效果,只是为用户提供方便,在点击此标签时就会聚焦到相关的表单上。该标签的for属性要与相关元素的id属性相同。

       <label for="n">跳转到input元素上</label>
        <br>
        <br>
        <input type="text" id="n">

label用法

下拉列表

<select> 表示下拉列表,该标签只是定义下拉列表, <option> 定义列表中的可选项。

select属性:

属性说明
autofocusautofocus页面加载自动获得焦点
disableddisabled禁用下拉列表
formform-id所属一个或多个form表单
multiplemultiple可以选择多个选项,只是展示
nametext定义下拉列表的名称
requiredrequired规定在提交表单时必须选择一个选项
sizenumber规定下拉列表可见选项的数目

option属性:

属性说明
disableddisabled该选项首次加载时被禁用
selectedselected首次加载时选中此选项
valuetext推送服务器的选项值

button按钮

<button> 表示一个按钮,它是一个闭合标签,里面可以放置文本,图像等。与input元素的按钮大不相同。请始终都要为button元素添加type属性。

属性:

属性说明
autofocusautofocus当页面加载自动获得焦点
disableddisabled禁用该按钮
formform_id属于一个或者多个form表单

大部分属性与表单的属性差不多。

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值