写一个输入手机号和姓名的表单
时间: 2024-04-12 07:28:09 浏览: 142
当然,我可以帮你写一个输入手机号和姓名的表单。以下是一个简单的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>手机号和姓名表单</title>
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="phone">手机号:</label>
<input type="tel" id="phone" name="phone" required pattern="[0-9]{10}"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```
这个表单包含两个字段:姓名和手机号。姓名字段使用 `<input>` 标签的 `type` 属性设置为 "text",手机号字段使用 `type` 属性设置为 "tel"。手机号字段还使用了 `required` 属性来确保用户必须填写该字段,以及 `pattern` 属性来限制用户只能输入10位数字。
你可以将上述代码保存为一个HTML文件,然后在浏览器中打开该文件,即可看到这个表单。用户在表单中输入姓名和手机号后,点击提交按钮即可提交表单。
相关问题
写一个输入手机姓名加两个单选的表单
当然,我可以帮你写一个包含姓名、手机号和两个单选选项的表单。以下是一个HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>手机姓名加两个单选表单</title>
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="phone">手机号:</label>
<input type="tel" id="phone" name="phone" required pattern="[0-9]{10}"><br><br>
<label for="option1">选项1:</label>
<input type="radio" id="option1" name="option" value="option1" required>
<label for="option1">选项1</label><br>
<label for="option2">选项2:</label>
<input type="radio" id="option2" name="option" value="option2" required>
<label for="option2">选项2</label><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```
这个表单除了包含姓名和手机号字段外,还有两个单选选项。单选选项使用 `<input>` 标签的 `type` 属性设置为 "radio",并且具有相同的 `name` 属性,这样它们就是互斥的,用户只能选择其中一个选项。
注意,单选选项和姓名、手机号字段都使用了 `required` 属性,以确保用户必须填写所有字段才能提交表单。
你可以将上述代码保存为一个HTML文件,然后在浏览器中打开该文件,即可看到这个表单。用户在表单中输入姓名、手机号,并选择其中一个单选选项后,点击提交按钮即可提交表单。
写一个输入手机姓名加两个单选的表单全部填完点击提交提示完成
当然,我可以帮你编写一个表单,用户输入手机姓名和两个单选选项,填写完毕后点击提交按钮后会显示一个提示。以下是一个示例的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>手机姓名加两个单选表单</title>
<script>
function showConfirmation() {
alert("提交成功!感谢您的填写。");
}
</script>
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="phone">手机号:</label>
<input type="tel" id="phone" name="phone" required pattern="[0-9]{10}"><br><br>
<label for="option1">选项1:</label>
<input type="radio" id="option1" name="option" value="option1" required>
<label for="option1">选项1</label><br>
<label for="option2">选项2:</label>
<input type="radio" id="option2" name="option" value="option2" required>
<label for="option2">选项2</label><br><br>
<input type="button" value="提交" onclick="showConfirmation()">
</form>
</body>
</html>
```
在这个示例中,我添加了一个名为 `showConfirmation()` 的JavaScript函数。当用户点击提交按钮时,该函数将被调用,显示一个提示框,告知用户提交成功。
你可以将上述代码保存为一个HTML文件,然后在浏览器中打开该文件。用户在表单中填写姓名、手机号,并选择其中一个单选选项后,点击提交按钮即可触发提示框显示提交成功的信息。
阅读全文
相关推荐

















