当前位置：首页 > 行业动态 > 正文

HTML如何制作表单

HTML表单是用于收集用户输入的一种网页元素，以下是制作HTML表单的详细步骤：

1、创建表单标签

在HTML中，使用<form>标签来创建一个表单。

<form>
  <!表单内容 >
</form>

2、添加输入元素

在表单标签内部，可以使用各种输入元素来收集用户数据，常见的输入元素有：文本框、密码框、单选按钮、复选框、下拉列表等。

<form>
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <input type="submit" value="提交">
</form>

3、设置表单属性

可以为表单元素设置一些属性，如action、method、enctype等。

action属性：指定表单数据提交的目标URL。

method属性：指定表单数据的提交方式，通常为GET或POST。

enctype属性：当表单包含文件上传时，需要设置为multipart/formdata。

<form action="https://example.com/submit" method="post" enctype="multipart/formdata">
  <!表单内容 >
</form>

4、添加其他表单元素

除了输入元素外，还可以添加其他表单元素，如文本区域、按钮、标签等。

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <textarea name="description" rows="4" cols="50"></textarea>
  <br>
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女
  <br>
  <input type="checkbox" name="hobbies" value="reading">阅读
  <input type="checkbox" name="hobbies" value="sports">运动
  <br>
  <select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>
  <br>
  <input type="submit" value="提交">
</form>

5、使用CSS样式美化表单

可以使用内联样式、内部样式表或外部样式表来美化表单。

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    width: 300px;
    margin: 0 auto;
  }
  label {
    display: inlineblock;
    width: 80px;
    textalign: right;
  }
  input[type="text"], input[type="password"], textarea {
    width: 150px;
    marginbottom: 10px;
  }
  input[type="submit"] {
    width: 100%;
  }
</style>
</head>
<body>
<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>
</body>
</html>

以上就是制作HTML表单的详细步骤。

本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/291646.html
0

相关文章

随机文章