在网站建设中,我们不可避免需要用户通过 输入 这一操作来提供一些信息。
如姓名、性别、用户名、密码等。
而如何建立一个用户友好的信息提供界面就需要交互式表单控件 <form> 的协助。
<form> 拥有两个属性 action 和 method
action 表示处理此表达信息的程序所在的URL,所述表单信息在提交时被发送到定义的地址。
method 它的值有 “GET” , “POST” ;其表示如何来发送表单信息。
|表单控件|
单行输入框 <input> —>单选框 —>多选框 |
---|
多行输入框<textarea> |
选项菜单 <select> <option> |
按钮<button> |
<input> 是一个只有开始标签没有结束标签的内联元素,其作用于让用户输入一行限制的字符串。
效果为:
input 拥有多个属性:
type 属性指定输入类型
在单行文本输入框中,我们可以写 type=”text”
在如密码输入框中,我们可以写 type=”passward” 这样输入的内容就会以黑点表示。
当然下面展示我们并没有写出但默认还是 type=”text”(其实是我忘记写了,又懒得改了)
占位文本 “placeholder”
其效果为在输入框没有任何文字的情况下,在框内显示信息如:
实现为:
<input placeholder="输入你的名字">
输入框名字 “name”
其作用为区别于其他 <input> 而利用 “name” 设定其名字,就不会和其他<input>搞混。
实现为
<input placeholder="输入你的名字" name="test">
显示效果无变化就不展示了。
输入框的值 “value”
其作用为在输入框中预输入一个值。
效果为:
实现为:
<input placeholder="输入你的姓名" name="test" value="小虫">
不可修改的输入框 “readonly” 和 “disabled”
在某些特殊情况,我们网站需要自动给用户分配如名称等信息,此时我们并不希望用户自行修改输入框内容,所以我们用到了 “readonly” 和 “disabled”
readonly 效果:
实现:
<input placeholder="输入你的姓名" name="test" value="小虫" readonly>
disable 效果
实现:
<input placeholder="输入你的姓名" name="test" value="小虫" disabled>
显而易见 两种方法间还是存在差异的
属性 | disable | readonly |
---|---|---|
对象 | 所有表单元素 | input 和 textarea |
作用 | 使文本框不能输入,大概表单提交时,使用了disabled的元素的值不会被传递出去。 | 仅使文本框不能输入 |
外观 | 使文本框变灰 | 围观没有变化 |
<input>的 “type” 属性的其他值
在上面我们提到了,type 属性除了 “text” 还可以填写 “password” 来让输入显示为黑点。
单选框 “radio”
当我们把 type 里的值调成 “radio” 那么输入框就会变成一个单项选择框
效果:
实现为:
<input type="radio" name="text3" value="男">
<input type="radio" name="text3" value="女">
name 相同即两个单选框表示同一题单选
当然,我们可以看到,单选框后并没有”男” “女”字样,那是因为 “value” 表示最后所提交的信息。想要单选框后面有文字只需在其后添加便可,如:
<input type="radio" name="text3" value="男">男
效果:
男 女
当然,我们发现如此设计,只能点击圆圈在哪选择要选的选项,选择范围太小,对于用户友好的信息获取界面,我们希望用户只需点击到”男”这个字样便能选择到选项,于此,我们只需要将 分别包裹单选框即可,如:
<label><input type="radio" name="text3" value="男">男</label>
效果为:
男女
使用
<input type=”radio” name=”text3″ value=”男” id=”男”>
<label for=”男”>男</label>
也拥有相同效果
复选框 “checkbox”
当我们将 <input> 的 type 的值改为 “checkbox” 就会变为复选框。
效果为:
你会的计算机语言:
Java JavaScript Python C语言
实现为:
<input type="checkbox" name="text4">Java
<input type="checkbox" name="text4">JavaScript
“checkbox” 同样支持 <label> 也同样需要相同 name 来代表同一道复选题
详见上面的 “radio”
多行输入框 <textarea> 输入的内容超过一行的长度时,它会自动换行,而单行输入框则不会换行且其存在结束标签。但其余很多地方与单行输入框很相似
textarea 所拥有的属性:
“name”属性:同 <input> 中 name
“placeholder”属性:同 <input> 中 placeholder
“rows” 属性:表示行数(高度)。
“cols”属性:表示文本域的可视宽度。
预输入信息可以在开始标签和结束标签之间填写
显示效果:
今天继续学HTML!
实现
<textarea name:"test2" rows="5" cols="30" placeholder="今天学了啥鸭">今天继续学HTML!</textarea>
当信息获取需要用户选取合适选项时,往往会出现选项众多的情况,这种情况下 单单 <input> 的单选框就显得有些不足了,因而我们需要选项菜单 <select> 以及选项 <option>
效果:
JavaPythonJavaScript
实现:
<select name="test5">
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
</select>
要注意的是 value 的值为最后提交上去的信息,因而要保证每个选项不同。
如果需要多选菜单,可以在 <select> 中添加 “multiple”
效果如下:
JavaPythonJavaScript
实现:
<select name="test6" multiple>
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
</select>
<button> 按钮
注册按钮:
效果:
注册
实现:
<button type="submit">注册</button>