HTML表单元素大全

网页三兄弟

平时用的比较多，以作备用
HTML表单指南

Demo


注册
（只读）
（禁用）

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<form id="form1" name="form1" method="post" class="formBox">
  <fieldset>
    <legend>注册</legend>
    <div class="formRow">
      <label class="formRow_label">用户帐号</label>
      <div class="formRow_content">
        <input autocomplete="off" type="text">
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label">输入密码</label>
      <div class="formRow_content">
        <input name="pass" placeholder="请输入密码" type="password">
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label">选择性别</label>
      <div class="formRow_content">
        <label role="radio"><input id="RadioGroup1_0" name="RadioGroup1" type="radio" value="radio">男</label>
        <label role="radio"><input id="RadioGroup1_1" name="RadioGroup1" type="radio" value="radio">女</label>
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label">兴趣爱好</label>
      <div class="formRow_content">
        <div role="group">
          <label role="checkbox">
            <input name="type" type="checkbox" value="听音乐/看电影">听音乐/看电影</label>
          <label role="checkbox">
            <input name="type" type="checkbox" value="拼图">拼图</label>
          <label role="checkbox">
            <input name="type" type="checkbox" value="篮球">篮球</label>
          <label role="checkbox">
            <input name="type" type="checkbox" value="品茶">品茶</label>
        </div>
      </div>
    </div>
    <input name="city" type="hidden" value="city">
    <div class="formRow">
      <label class="formRow_label">上传头像</label>
      <div class="formRow_content">
        <div class="fileInput"><input multiple type="file"><!--点击这里上传文件--></div>
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label">输入数量</label>
      <div class="formRow_content">
        <input max="10" min="0" step="1" type="number" value="1">
      </div>
    </div>

    <div class="formRow">
      <label class="formRow_label" for="email">输入邮箱</label>
      <div class="formRow_content">
        <input id="email" name="email" placeholder="请输入邮箱" type="email">
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label">输入链接</label>
      <div class="formRow_content">
        <input placeholder="请输入链接" type="url">
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label">选择颜色</label>
      <div class="formRow_content">
        <input placeholder="请选择颜色" type="color">
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label">可选范围</label>
      <div class="formRow_content">
        <input placeholder="请选择范围" type="range">
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label">出生日期</label>
      <div class="formRow_content">
        <input placeholder="请选择时间" type="date">
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label" for="id">用户ID</label>
      <div class="formRow_content">
        <input id="id" name="id" readonly="readonly" value="04D6H89Z">（只读）
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label" for="disabled">禁止输入</label>
      <div class="formRow_content">
        <input disabled="" id="disabled" name="disabled" placeholder="禁止输入">（禁用）
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label" for="about">自我介绍</label>
      <div class="formRow_content">
        <textarea autocomplete="off" id="about" name="about" placeholder="多行文本框"></textarea>
        <div>
          <label><input name="" type="checkbox">接受用户服务协议</label>
        </div>
      </div>
    </div>
    <div class="formRow">
      <label class="formRow_label"></label>
      <div class="formRow_content">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <button>返回</button>
      </div>
    </div>
  </fieldset>
  <input name="from" type="hidden" id="from" value="baidu">
</form>

scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
input, textarea, button {
  display: inline-block;
  padding: 0 5px;
  min-height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: rgba(0, 0, 0, .65);
  border-radius: 4px;
  transition: all .3s;
  vertical-align: middle;
  border: 1px solid #d9d9d9;
  outline:medium;
}
input[type="file"] {border: none;line-height: 40px;padding: 0;
&:focus{border: 0;}
}
input:focus, textarea:focus {border: 1px solid #40b3ff;box-shadow: 0 0 8px rgba(skyblue, 10)}
fieldset {border: 1px solid $c_eee;border-radius: 5px;margin-bottom: 1em;}
textarea {min-width: 30em;}
label[role="radio"] {margin: 0 10px 0 0;vertical-align: middle;
  input {vertical-align: middle;min-height: auto;}
}
input[type="checkbox"] {padding: 0;min-height: auto;margin: 0 5px 0 0;}
label[role="checkbox"] {margin: 0 10px 0 0;}
input[type="submit"], input[type="reset"], button { padding: 0 1em;cursor: pointer;}

.formBox {
  * {
    box-sizing: border-box;
  }
  .formRow {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    .formRow_label {
      width: 120px;
      line-height: 40px;
    }
    .formRow_content {
      width: calc(100% - 120px)
    }
  }
}