用h5做三个可选择的小方框并且可以编辑文字内容的代码
时间: 2024-03-09 22:47:06 浏览: 21
以下是一个简单的实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>Edit Boxes</title>
</head>
<body>
<div>
<h3>Box 1</h3>
<textarea id="box1" rows="4" cols="50">
This is box 1.
</textarea>
</div>
<div>
<h3>Box 2</h3>
<textarea id="box2" rows="4" cols="50">
This is box 2.
</textarea>
</div>
<div>
<h3>Box 3</h3>
<textarea id="box3" rows="4" cols="50">
This is box 3.
</textarea>
</div>
</body>
</html>
```
这个页面中包含了三个 `div` 容器,每个容器中包含一个 `textarea` 元素和一个标题。
你可以通过 CSS 样式来美化这些元素的外观。
如果你需要在这些框中添加更多的内容,可以通过 JavaScript 来动态地修改它们的值。
相关问题
用H5做一个手机颜色选择的代码
以下是一个简单的用H5实现手机颜色选择的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>手机颜色选择</title>
</head>
<body>
<h2>请选择手机颜色:</h2>
<input type="radio" name="color" value="black" id="black">
<label for="black">黑色</label><br>
<input type="radio" name="color" value="white" id="white">
<label for="white">白色</label><br>
<input type="radio" name="color" value="blue" id="blue">
<label for="blue">蓝色</label><br>
<input type="radio" name="color" value="red" id="red">
<label for="red">红色</label><br>
<button onclick="submitColor()">提交</button>
<script>
function submitColor() {
var radios = document.getElementsByName('color');
var selectedColor = '';
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedColor = radios[i].value;
break;
}
}
alert('你选择的手机颜色是:' + selectedColor);
}
</script>
</body>
</html>
```
该示例中使用了四个单选框来选择手机的颜色,使用了一个按钮来提交选择的颜色。当点击提交按钮时,会调用JavaScript函数submitColor()来获取选择的颜色,并弹出一个提示框显示选择的颜色。
用原生h5写一个table表格,并且实现table表格内容可以滚轮滑动的效果
要实现带滚动效果的表格,你可以使用HTML5的`<table>`元素结合CSS的样式和属性来实现。下面是一个示例代码:
```html
<style>
.table-container {
width: 300px;
height: 200px;
overflow: auto;
}
</style>
<div class="table-container">
<table>
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容 1</td>
<td>内容 2</td>
<td>内容 3</td>
</tr>
<!-- 添加更多行 -->
<tr>
<td>更多内容 1</td>
<td>更多内容 2</td>
<td>更多内容 3</td>
</tr>
</tbody>
</table>
</div>
```
在上述代码中,我们使用了一个包裹表格的容器 `<div class="table-container">`,设置了固定的宽度和高度,并将其 `overflow` 属性设置为 `auto`,这样当表格内容超出容器的大小时,会出现滚动条。
你可以根据实际需求修改容器的宽度和高度,以及表格的内容和样式。