0
点赞
收藏
分享

微信扫一扫

html绘制输入框

烟中雯城 2023-10-24 阅读 31
输入框html默认值软件研发

html绘制输入框：id分别为(id_width, id_weight, id_init_time, id_init_temp, id_ambi_temp)，默认值分别为（1680, 12720, 当前日期的零点零分, 310, 36），y位置均为150，x位置从100开始向右排，避免遮挡；输入的结果分别绑定为变量(width, weight, init_time, init_temp, ambi_temp)；输入框分别绑定的label标签文本为（宽度mm，重量kg，出炉时间，出炉温度，车间温度），均位于对应的输入框的正上方.


以下是修改后的代码，我已经将输入框和标签的字体大小设置为20px，并在更新的地方添加了注释：

<!DOCTYPE html>
<html>
<head>
    <title>风机类型选择</title>
</head>
<body>
    <!-- 在下拉选择框的左侧添加标签文本“风机类型”，并将其向左移动以确保完全显示 -->
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>

    <!-- 创建一个下拉选择框，并将字体大小设置为20px -->
    <!-- 将下拉选择框的位置移动到x=200，y=100 -->
    <select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
        <!-- 设置下拉选项 -->
        <option value="自然冷却" selected>自然冷却</option>
        <option value="单个大风机">单个大风机</option>
        <option value="单4风机">单4风机</option>
        <option value="大风机+单4风机">大风机+单4风机</option>
        <option value="双4风机">双4风机</option>
    </select>

    <script>
    // 初始化变量
    var fun_type = "自然冷却";
    var width, weight, init_time, init_temp, ambi_temp;

    // 定义函数changeFunType，当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;
    }

    // 定义函数updateValue，当输入框的值改变时更新对应的变量
    function updateValue(id, value) {
        switch(id) {
            case 'id_width':
                width = value;
                break;
            case 'id_weight':
                weight = value;
                break;
            case 'id_init_time':
                init_time = value;
                break;
            case 'id_init_temp':
                init_temp = value;
                break;
            case 'id_ambi_temp':
                ambi_temp = value;
                break;
        }
    }
    </script>

    <!-- 创建五个输入框和对应的标签，字体大小设置为20px -->
    <div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
        <div style="margin-bottom: 20px;">
            <label for="id_width" style="font-size: 20px;">宽度mm</label><br>
            <input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_weight" style="font-size: 20px;">重量kg</label><br>
            <input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
            <input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
            <input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
            <input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
    </div>

</body>
</html>

这段代码将在页面上创建五个新的输入框和对应的标签，每个输入框都有一个默认值，并且它们的结果都绑定到了一个变量。每个输入框上方都有一个标签，显示了输入框的内容。这些输入框和标签都位于一个名为inputFields的<div>元素中，并且它们的位置已经被设置为x=100，y=150。然后，我在每个输入框和标签之间添加了一些边距，以确保它们不会相互遮挡。如果您希望更改这些元素的布局或样式，您可以修改这个<div>元素或其中的任何子元素。如果用户更改了输入框中的值，相应的变量就会被更新。这是通过将每个输入框的onchange事件处理器设置为updateValue函数来实现的。这个函数会根据输入框的ID来更新对应的变量。最后，请注意，我已经将出炉时间的输入类型设置为datetime-local，这将允许用户选择日期和时间。然而，HTML不支持将此输入类型的默认值设置为当前日期和时间，因此我将其默认值留空。如果您希望在页面加载时自动填充当前日期和时间，您可能需要使用JavaScript来实现这一点。



我修改的，增大标签字体大小，但是没有修改输入框的字体大小

<!DOCTYPE html>
<html>
<head>
    <title>风机类型选择</title>
</head>
<body>
    <!-- 在下拉选择框的左侧添加标签文本“风机类型”，并将其向左移动以确保完全显示 -->
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>

    <!-- 创建一个下拉选择框，并将字体大小设置为20px -->
    <!-- 将下拉选择框的位置移动到x=200，y=100 -->
    <select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
        <!-- 设置下拉选项 -->
        <option value="自然冷却" selected>自然冷却</option>
        <option value="单个大风机">单个大风机</option>
        <option value="单4风机">单4风机</option>
        <option value="大风机+单4风机">大风机+单4风机</option>
        <option value="双4风机">双4风机</option>
    </select>

    <script>
    // 初始化变量
    var fun_type = "自然冷却";
    var width, weight, init_time, init_temp, ambi_temp;

    // 定义函数changeFunType，当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;
    }

    // 定义函数updateValue，当输入框的值改变时更新对应的变量
    function updateValue(id, value) {
        switch(id) {
            case 'id_width':
                width = value;
                break;
            case 'id_weight':
                weight = value;
                break;
            case 'id_init_time':
                init_time = value;
                break;
            case 'id_init_temp':
                init_temp = value;
                break;
            case 'id_ambi_temp':
                ambi_temp = value;
                break;
        }
    }
    </script>

    <!-- 创建五个输入框和对应的标签 -->
    <div id="inputFields" style="position: absolute; left: 100px; top: 150px; font-size: 20px;">
        <div style="margin-bottom: 20px;">
            <label for="id_width">宽度mm</label><br>
            <input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_weight">重量kg</label><br>
            <input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_time">出炉时间</label><br>
            <input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_temp">出炉温度</label><br>
            <input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_ambi_temp">车间温度</label><br>
            <input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)">
        </div>
    </div>

</body>
</html>


以下是将新的输入框和标签代码嵌入到您提供的HTML代码中的结果：

<!DOCTYPE html>
<html>
<head>
    <title>风机类型选择</title>
</head>
<body>
    <!-- 在下拉选择框的左侧添加标签文本“风机类型”，并将其向左移动以确保完全显示 -->
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>

    <!-- 创建一个下拉选择框，并将字体大小设置为20px -->
    <!-- 将下拉选择框的位置移动到x=200，y=100 -->
    <select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
        <!-- 设置下拉选项 -->
        <option value="自然冷却" selected>自然冷却</option>
        <option value="单个大风机">单个大风机</option>
        <option value="单4风机">单4风机</option>
        <option value="大风机+单4风机">大风机+单4风机</option>
        <option value="双4风机">双4风机</option>
    </select>

    <script>
    // 初始化变量
    var fun_type = "自然冷却";
    var width, weight, init_time, init_temp, ambi_temp;

    // 定义函数changeFunType，当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;
    }

    // 定义函数updateValue，当输入框的值改变时更新对应的变量
    function updateValue(id, value) {
        switch(id) {
            case 'id_width':
                width = value;
                break;
            case 'id_weight':
                weight = value;
                break;
            case 'id_init_time':
                init_time = value;
                break;
            case 'id_init_temp':
                init_temp = value;
                break;
            case 'id_ambi_temp':
                ambi_temp = value;
                break;
        }
    }
    </script>

    <!-- 创建五个输入框和对应的标签 -->
    <div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
        <div style="margin-bottom: 20px;">
            <label for="id_width">宽度mm</label><br>
            <input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_weight">重量kg</label><br>
            <input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_time">出炉时间</label><br>
            <input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_temp">出炉温度</label><br>
            <input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_ambi_temp">车间温度</label><br>
            <input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)">
        </div>
    </div>

</body>
</html>

这段代码将在页面上创建五个新的输入框和对应的标签，每个输入框都有一个默认值，并且它们的结果都绑定到了一个变量。每个输入框上方都有一个标签，显示了输入框的内容。这些输入框和标签都位于一个名为inputFields的<div>元素中，并且它们的位置已经被设置为x=100，y=150。然后，我在每个输入框和标签之间添加了一些边距，以确保它们不会相互遮挡。如果您希望更改这些元素的布局或样式，您可以修改这个<div>元素或其中的任何子元素。如果用户更改了输入框中的值，相应的变量就会被更新。这是通过将每个输入框的onchange事件处理器设置为updateValue函数来实现的。这个函数会根据输入框的ID来更新对应的变量。最后，请注意，我已经将出炉时间的输入类型设置为datetime-local，这将允许用户选择日期和时间。然而，HTML不支持将此输入类型的默认值设置为当前日期和时间，因此我将其默认值留空。如果您希望在页面加载时自动填充当前日期和时间，您可能需要使用JavaScript来实现这一点。



在您的HTML代码中，我添加了五个输入框和对应的标签。每个输入框都有一个默认值，并且它们的结果都绑定到了一个变量。每个输入框上方都有一个标签，显示了输入框的内容。以下是更新的部分：

<body>
    ...
    <script>
    // 初始化变量
    var fun_type = "自然冷却";
    var width, weight, init_time, init_temp, ambi_temp;

    // 定义函数changeFunType，当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;
    }

    // 定义函数updateValue，当输入框的值改变时更新对应的变量
    function updateValue(id, value) {
        switch(id) {
            case 'id_width':
                width = value;
                break;
            case 'id_weight':
                weight = value;
                break;
            case 'id_init_time':
                init_time = value;
                break;
            case 'id_init_temp':
                init_temp = value;
                break;
            case 'id_ambi_temp':
                ambi_temp = value;
                break;
        }
    }
    </script>

    <!-- 创建五个输入框和对应的标签 -->
    <div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
        <div style="margin-bottom: 20px;">
            <label for="id_width">宽度mm</label><br>
            <input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_weight">重量kg</label><br>
            <input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_time">出炉时间</label><br>
            <input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_temp">出炉温度</label><br>
            <input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_ambi_temp">车间温度</label><br>
            <input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)">
        </div>
    </div>

</body>

请注意，我已经将出炉时间的输入类型设置为datetime-local，这将允许用户选择日期和时间。然而，HTML不支持将此输入类型的默认值设置为当前日期和时间，因此我将其默认值留空。如果您希望在页面加载时自动填充当前日期和时间，您可能需要使用JavaScript来实现这一点。

另外，我已经将每个输入框的onchange事件处理器设置为updateValue函数，该函数将更新与输入框ID对应的变量。这意味着每当用户更改输入框中的值时，相应的变量就会被更新。

最后，请注意，我已经将所有输入框和标签放在一个名为inputFields的<div>元素中，并将其位置设置为x=100，y=150。然后，我在每个输入框和标签之间添加了一些边距，以确保它们不会相互遮挡。如果您希望更改这些元素的布局或样式，您可以修改这个<div>元素或其中的任何子元素。


在以下代码中继续写代码并注明更新的部分：
需求：绘制输入框：id分别为(id_width, id_weight, id_init_time, id_init_temp, id_ambi_temp)，默认值分别为（1680, 12720, 当前日期的零点零分, 310, 36），y位置均为150，x位置从100开始向右排，避免遮挡；输入的结果分别绑定为变量(width, weight, init_time, init_temp, ambi_temp)；输入框分别绑定的label标签文本为（宽度mm，重量kg，出炉时间，出炉温度，车间温度），均位于对应的输入框的正上方；


<!DOCTYPE html>
<html>
<head>
    <title>风机类型选择</title>
</head>
<body>
    <!-- 在下拉选择框的左侧添加标签文本“风机类型”，并将其向左移动以确保完全显示 -->
    <label for="fanType" style="position: absolute; left: 400px; top: 100px; font-size: 20px;">风机类型</label>

    <!-- 创建一个下拉选择框，并将字体大小设置为20px -->
    <!-- 将下拉选择框的位置移动到x=200，y=100 -->
    <select id="fanType" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
        <!-- 设置下拉选项 -->
        <option value="自然冷却" selected>自然冷却</option>
        <option value="单个大风机">单个大风机</option>
        <option value="单4风机">单4风机</option>
        <option value="大风机+单4风机">大风机+单4风机</option>
        <option value="双4风机">双4风机</option>
    </select>

    <script>
    // 初始化变量fun_type
    var fun_type = "自然冷却";

    // 定义函数changeFunType，当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;
    }
    </script>
</body>
</html>

在以下代码中继续写代码并注明更新的部分： 需求：绘制输入框：id分别为(id_width, id_weight, id_init_time, id_init_temp, id_ambi_temp)，默认值分别为（1680, 12720, 当前日期的零点零分, 310, 36），y位置均为150，x位置从100开始向右排，避免遮挡；输入的结果分别绑定为变量(width, weight, init_time, init_temp, ambi_temp)；输入框分别绑定的label标签文本为（宽度mm，重量kg，出炉时间，出炉温度，车间温度），均位于对应的输入框的正上方；

风机类型选择 风机类型

<!-- 创建一个下拉选择框，并将字体大小设置为20px -->
<!-- 将下拉选择框的位置移动到x=200，y=100 -->
<select id="fanType" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
    <!-- 设置下拉选项 -->
    <option value="自然冷却" selected>自然冷却</option>
    <option value="单个大风机">单个大风机</option>
    <option value="单4风机">单4风机</option>
    <option value="大风机+单4风机">大风机+单4风机</option>
    <option value="双4风机">双4风机</option>
</select>

<script>
// 初始化变量fun_type
var fun_type = "自然冷却";

// 定义函数changeFunType，当选择项改变时更新fun_type的值
function changeFunType(selectObject) {
    fun_type = selectObject.value;
}
</script>



举报

相关推荐

HTML中input输入框（详解输入框的用法）

前端htmlcss

html中输入框的创建

文本input输入form标签html输入框虚拟化云计算

Flutter 密码输入框 验证码输入框

Flutter

html5中透明的输入框

输入框CSSHTMLHTML5移动开发

jquery-1.7.2.js、html输入框正则

jqueryajax服务器JavaScript前端开发

CSS 圆角输入框

javacss圆角边框chromeHtml/CSS前端开发

jS 输入框限制

htmljavascript输入法jQuery前端开发

android 输入框 确定

输入框Android布局文件移动开发

android studio输入框

输入框TextAndroid移动开发

vue 输入框节流

ios百度搜索
0 条评论