关于HTML中的表单
表单由三个元素组成
表单域:
表单的所有信息和控件都需要处于表单域中,这样在才可以提交整个表单
表单域的标签为<form></form>
代码如下:
<form>
<form/>
表单控件:
表单控件是表单的主题,标签为<input />
而其中有一个必须要填写的属性标签<type>
,给它不同的属性可以变成不同的表单控件。
属性名 | 效果 |
---|---|
text | 单行文本输入 |
password | 密码输入 |
radio | 单项选择 |
checkbox | 多项选择 |
button | 普通按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
image | 图片式的提交按钮 |
file | 文件域 |
而除了表格里的标签外,还有几个单独的属性标签也非常重要的
<name>
:用来区分不同的控件,需要注意的是,在单项选择和多项选择中,控件名需要保持一致。<value>
:用在文本输入框中,展示一段文字,如在用户名输入框中显示:请输入用户名。<checked>
:用在选择控件中,为默认选中。
文本信息:
文本信息用来提示控件的用途和提示信息,这个自然不用多说。
拓展
表单中还有三个经常用到的控件
- 下拉列表:
<select>
<option></option>
<option></option>
</ select>
- 文本域:
<textarea rows="单行可输入数量” cols="可输出行数”>
</ textarea>
- 点击文本选择输入:
这个比较特殊,作用是点击文本就可以选择对应的输入框,写法有两种,一种是直接包含,一种是通过for类似于锚点。标签名为
<label>用户名<input type="text" value="请输入用户名"></label>
<label for=""name>用户名</label>
<input type="text" value="请输入用户名" id="name">
示例
以一个简单的注册表来展示以上介绍的各个标签,代码如下:
<body>
<h3 align="center">注册表</h3><dr />
<form align="center">
<label>用户名:<input type="text" name="uarename"value="请输入用户名"><br /></label>
<label for="mm">密码:</label>
<input type="password" name="pwd" id="mm"><br />
性别:男<input type="radio" name="sex" checked="checked">女<input type="radio" name="sex"><br />
爱好:运动<input type="checkbox" name="ah">
绘画<input type="checkbox" name="ah">
看电影<input type="checkbox" name="ah">
逛街<input type="checkbox" name="ah">
旅游<input type="checkbox" name="ah" checked="checked"><br />
所在地区:<select>
<option>北京</option>
<option>天津</option>
<option>河北</option>
<option>山东</option>
</select><br />
<label>验证码<input type="text" name="yzm" value="请输入验证码"></label>
<input type="button" name="bt" value="点击获取验证码"><br/>
<input type="submit" name="tj" value="确认提交">
<input type="reset" name="cz" value="重新输入"><br/>
留言板:<br />
<textarea cols="30" rows="5">
</textarea><br / >
<input type="image" name="tp" src="imges/1.png">
</form>
显示效果如下:
以上就是本文的全部内容了