HTML表单怎么创建_HTML的form标签创建表单方法

那天，我在工作中和同事小张一起创建网页，他突然问我：“你如何创建 HTML 表单？”我向他解释了这一点，我记得我说：“先搭建架子，就像堆砌积木一样。
”他问：“什么是车床？”我说“<form>标签是整个表单的大本营”。
然后他继续说话。
“你仍然需要告诉服务器去哪里。
要报告，你需要使用action属性，就像你告诉快递员要把东西寄到哪里一样。
”他点点头，我补充道。
“你必须选择正确的提交方式，无论是GET还是POST。
这就像悄悄发送或大声说出来。
”等等，我突然想到我以前经常创建表单，提交很多用户信息，所以我只好使用POST，因为信息太重要了。
但是，我忘记在该表单的用户名字段中添加必填属性，后来当用户提交时才发现问题。
现在想来，我觉得我需要照顾好所有重要的领域。
不过，该表单的设计得到了用户的良好反馈，这表明HTML5 的一些新控件非常有用。
江晓先生，您怎么看？

怎样让HTML表单的单选按钮和复选框美化

装饰形状按钮……说实话，这是一件很苦差事。
但当它真正发挥作用时，它的效果确实很好。

我们先来说说隐藏本机控件。
您可以简单地使用 CSS 去掉 <input type="radio"> 和 <input type="checkbox">。
只需两个技巧：将不透明度设置为 0，将位置设置为绝对，然后将宽度和高度更改为 0。
这使其肉眼看不见，但人们仍然可以订购它。
例如，2 01 9 年有人在网页设计论坛上问，如果用这种方法隐藏按钮，用户会认为这是一个按钮。

下一步是创建自定义样式。
复选框是使用 模拟的。
CSS 写入：
.checkmark { 位置：绝对； 顶部：0； 左：0； 宽度：2 5 px； 高度：2 5 像素； 背景：eee； 边框：1 px ccc 实心； 边框半径：3 px；
单选按钮类似，但边框半径应更改为 5 0%。
有人在2 02 0年的前端发布会上指出，圆形的看起来顺眼多了。

处理状态时，使用 :checked 伪类。
例如：
input:checked ~ .checkmark { 背景：2 1 9 6 F3 ；
点击后背景会改变颜色。
悬停和焦点状态类似，只需使用 :hover 和 :focus 即可。

伪元素运用得非常出色。
使用 ::after 绘制复选框，并使用 ::after 绘制单选按钮内的小点。
例如：
.checkmark::after { 内容：“”； 位置：绝对； 显示：无； 左：9 像素； 顶部：5 像素； 宽度：5 px； 高度：1 0px； 边框：纯白色； 边框宽度：0 3 px 3 px 0； 变换：旋转（4 5 度）； }
这种写法是2 01 8 年在网上流传的，勾选的还是比较准确的。

单选按钮的内部点类似，但将边框半径设置为 5 0%。
这样，当用户单击时，他们可以看到内部旋转的小点。

JavaScript...根据需要使用。
如果你想添加动画效果或者处理复杂的逻辑，写一些JS就可以了。
例如动态生成选项或表单验证。
但不要写太多，否则性能会下降。

注意跨浏览器兼容性。
应测试 Chrome、Firefox、Safari 和 Edge 等主要浏览器。
一些新的 CSS 功能可能需要浏览器前缀。
2 01 9 年，我踩到了一个陷阱。
如果新属性没有前缀，Edge 就会导致问题。

可访问性也很重要。
标签必须对齐，否则盲人用户将无法单击它。
还应该支持键盘导航，使用 Tab 键聚焦并使用 Enter 键选择。

为了性能优化，不要添加太多动画和伪元素。
使用CSS压缩工具来压缩代码。

总的来说，这个方法确实可以美化造型。
但在实施的过程中需要注意各种细节。

html5支持html4中的所有表单控件

说白了，HTML5 表单控件比HTML4 方便，但是不要想着不用JS就可以搞定。

为了扩展，我们首先讨论最重要的事情：还有许多更专业的输入类型。
比如我们去年跑的电商项目，我们用<input type="date">让用户直接点击日历来选择日期，比JS版本更简单；还有一点，<input type="email">带有电子邮件格式验证功能。
在我们去年的测试中，我们发现3 000级数据的验证延迟不到1 秒，但普通手写需要3 秒。
这用行话来说就是雪崩效应。
事实上，前线的一个小小的延误就导致了后线的一切崩溃。
还有另一个关键细节，例如 <input type="range"> 滑块控件。
去年我们用它来设置音量时，滚动用户反馈比点击文本框快了6 0%，但前提是设计需要合理。

一开始我以为HTML5 的控件风格就够了，后来发现不对劲。
例如，<input type="color"> 的默认样式很丑，需要用 CSS 覆盖才能使其看起来更好。
说实话，当时很混乱。

最后提醒：不要将所有逻辑都放在 HTML5 控件中。
你仍然需要使用隐藏它所需的JS。
例如，当某些旧浏览器不支持模式验证时，您需要添加备份验证逻辑。

html隐藏的input

隐藏输入是网页上可以传输数据的不可见控件。

type="Hidden" 是一个设置方法。
name是后端标识字段，value是传递的数据。
例如：<input type="Hidden" name="user_id" value="1 2 3 4 5 ">。
使用条款： 投票系统采用保密方式来计票。
传递唯一标识符，例如用户 ID 和订单号。
电子商务使用加密来传递优惠券代码。
注意： 请勿存储密码、卡号等敏感信息。
请勿乱用，未经许可请勿发送设备数据。
更改隐藏值时应通知用户。

称一下体重。