html表单之html怎么制作< form>表单?

原创 PHP笔记  2017-03-18 17:46  阅读 2,596 views 次

html表单是用来接收用户输入的不同类型的数据的,应用非常广泛,一般的网站都能找到html表单,比如网站的注册、登陆、评论等等都用到了表单。html表单是用<form>标签来定义的,<form>标签中是<input> 输入标签,<input>标签是用来搜集用户信息。根据type属性值的不同,输入字段可以有很多不同形式(文本域(textarea)、单选框(radio-buttons)、复选框(checkboxes)等等)。

格式:

<form>
......
input元素
.......
</form>

1、html表单文本域(Text Fields)

当用户要输入字母、数字等文本内容时,这时就会用到文本域。文本域是通过type="text"来设定。

实例:

......
<body>
<form>
学&nbsp;&nbsp;号: <input type="text"><br>
用户名:: <input type="text">
</form>
</body>
......

运行结果:

2、html表单密码字段

当登陆时,输密码不想让别人看见,就会用到密码字段。密码字段用type="password"来设定,输入的内容不被直接显示出来,而是以*号或黑小圆点代替。

实例:

......
<body>
<form>
密码: <input type="password">
</form>
</body>
......

运行结果:

3、html表单单选按钮(Radio Buttons)

当遇到单选输入的时候,就会用到单选按钮,比如注册时选择男女时。单选按钮使用type="radio"来设定。

实例:

......
<body>
<form>
<input type="radio" name="sex" value="男">男<br>
<input type="radio" name="sex" value="女">女
</form>
</body>
......

运行结果:

注意:单选按钮中name属性的属性值必须一样,不然就成多选了。

4、html表单复选框(Checkboxes)

当遇到多选输入时,就会用到复选框,比如在选择自己个人爱好的时候。复选框使用 type="checkbox"来设定。

实例:

......
<body>
<form>
<input type="checkbox" name="hobby" value="篮球">篮球<br>
<input type="checkbox" name="hobby" value="足球">足球
</form>
</body>
......

运行结果:

本文地址:https://www.ggbiji.com/html-form.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情