本文来源于饥人谷相关资料以及W3C教程,内容主要选择常用html表单内容
简介及引言:
HTML表单是一个包含表单元素的区域,用来收集用户输入的内容并提交。
表单使用标签<form>来设置
HTML 表单包含表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
脉络逻辑:
表单--->重要元素--->次级重要属性
重要元素:
- input元素:
语法:
<input type="xxxx" name="xxx" 其他属性>
type 属性的常用选择:
—text
—password
—submit
—radio
—checkbox
—button
- select元素和嵌套的option元素:
<select name="number">
<option value="123">1</option>
<option value="456">2</option>
<option value="879">3</option>
<option value="000">4</option>
</select>
- button元素:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
HTML 表单用于搜集不同类型的用户输入。
常见input标签及其作用:
<input type="text">:定义用于文本输入的单行输入字段(默认宽度为20个字符)
<input type="password">:定义密码字段
<input type="radio">:定义单选按钮,允许用户在有限数量的选项中选择一个
<input type="checkbox">:定义复选框
<input type="submit">:定义用于向表单处理程序提交表单的按钮。
<input type="button">:定义按钮
<input type="number">:用于应该包含数字值的输入字段
<input type="date">:用于应该包含日期的输入字段
<input type="color">:用于应该包含颜色的输入字段,根据浏览器支持,颜色选择器会出现输入字段中。
特别注意的一个类型:
type=hidden
通常称为隐藏域:如果一个非常重要的信息需要被提交到下一页,但又不能或者无法明示的时候。
总之,你在页面中是看不到hidden在哪里。最有用的是hidden的值。
<form name="form1">
your hidden info here:
<input type="hidden" name="yourhiddeninfo" value="cnbruce.com">
</form>
<script>
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)
</script>
(举例:这个属性常常被用在表单提交时生成一个随机的码,服务器可以根据这个码验证请求是否过期,用于防止恶意的多次请求发送。)