经验总结

  1. 首页 > 生活 > >

2 HTML元素大全-表单( 三 )

生活百科

<style>.iform {text-align: right;display: grid;grid-template-columns: 80px 200px 80px 200px;gap: 10px 5px;}/* 重写radio的样式 */.iform input[type="radio"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 50%;width: 20px;height: 20px;border: 3px solid #999;transition: 0.2s all linear;outline: none;position: relative;}.iform input[type="radio"]:checked {border: 6px solid #4A80FF;}.iform input:invalid {border-color: red;}.iform input,.iform label {height: 26px;padding: 0 3px;display: inline-block;vertical-align: middle;}</style><form class="iform">text：<input type="text" autocomplete="on" required placeholder="username" autofocus>password：<input type="password" required maxlength="12" minlength="6">number：<input type="number" step="12" min="1" value="https://www.huyubaike.com/biancheng/33" >radio：<div style="text-align:left;"><label><input type="radio" name="sex" checked>男</label><label><input type="radio" name="sex">女</label></div>checkbox：<div style="text-align:left;"><label><input type="checkbox" name="cbgroup">做饭</label><label><input type="checkbox" name="cbgroup">打球</label></div><input type="hidden" value="https://www.huyubaike.com/biancheng/key123">file：<input type="file" accept="image/*">email：<input type="email" inputmode="email" pattern=".+@163.com" placeholder="***@163.com">range：<input type="range" min="0" max="100" value="https://www.huyubaike.com/biancheng/10" step="5">search：<input type="search" list="slist">tel：<input type="tel" pattern="[0-9]*" maxlength="14">url：<input type="url" placeholder="http://example.com">color：<input type="color" value="https://www.huyubaike.com/biancheng/#ff0000" >datetime-local<input type="datetime-local">month：<input type="month" step="1">time：<input type="time" value="https://www.huyubaike.com/biancheng/12:12">week：<input type="week" value="https://www.huyubaike.com/biancheng/12:12" required><input type="reset" value="https://www.huyubaike.com/biancheng/reset重置"><input type="button" value="https://www.huyubaike.com/biancheng/普通按钮"><input type="image" src="https://www.huyubaike.com/res/btnb.png" width="60px"><input type="submit" value="https://www.huyubaike.com/biancheng/submit提交"></form>

2 HTML元素大全-表单

文章插图
<datalist>数据集合<datalist>数据集合元素 ， 包含了一组<option>元素 ， 提供给文本类<input>（list属性）使用 ， 作为可选值的数据集 。
  • 文本、数字输入的候选值 ， 包括text、number、email、url、tel、search等 。
  • range的刻度 。
<datalist id="optfruit"><option value="https://www.huyubaike.com/biancheng/香蕉">香蕉</option><option value="https://www.huyubaike.com/biancheng/火龙果">火龙果</option><option value="https://www.huyubaike.com/biancheng/绿色蔬菜">冬瓜</option><option value="https://www.huyubaike.com/biancheng/男瓜"><option value="https://www.huyubaike.com/biancheng/其他"></datalist><input type="search" list="optfruit">
2 HTML元素大全-表单

文章插图
03、<textarea>多行文本<textarea> 可以输入多行文本 ， 支持换行、空格 ， 行内元素 。
属性描述值name表单提交数据的keyrows文本行数 ， 同css样式的高度整数cols文本列数 ， 同css样式的宽度整数
<textarea> 还可以使用 <input> 中的一些常见属性 ， 如autocomplete、autofocus、disabled、placeholder、readonly ， 和 required、maxlength等 。可使用css样式属性

经验总结扩展阅读


上一篇：2023年2月2日打更黄道吉日 2023年2月2日打更好吗

下一篇：几号入伏2023几号入伏