HTML-表单

表单主要用于收集用户信息

表单的组成

一个完整的表单包括表单域、表单控件(表单元素)和提示信息3个部分组成。

一.表单域

表单域是一个包含表单元素的区域

<from>会把它范围内的元素信息提交给服务器

基本格式

<from action="url地址" method="提交方式" name="表单域名称">

各种表单元元素控件

</from>

二.表单元素

1.input输入表单元素

2.select下拉表单元素

3.textarea文本域元素

1.input输入表单元素

(1)type属性文本及密码输入框

 例如,text定义单行输入:

 <from>
        <!-- text 文本框 用户可以在里面输入任何文字 -->
        用户名:<input type="text"> <br>
        密码:<input type="text"><br>
        掩盖密码:<input type="password"><br>
        <!-- radio定义单选按钮 ,可实现单选一-->
        性别:男<input type="radio">女<input type="radio"><br>
        <!-- checkbox定义复选框 可实现多选-->
        兴趣爱好:唱歌<input type="checkbox">跳舞<input type="checkbox">睡觉<input  type="checkbox"><br>
       
     </from>

运行结果如下 

 input其他常用的标签如下

 name值和value值是每个表单元素都有的属性值

 name是表单元素名字,主要时区别不同的表单元素,name属性后面的值是自定义的,r

 性别:男<input type="radio" name="sex">女<input type="radio" name="sex"><br>

 运行结果

checked="checked“属性设置打开页面时默认选中按钮

<!-- checked属性设置表示单选框或者复选框打开时默认选择该按钮 -->
       性别:男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"><br>
       兴趣爱好:唱歌<input type="checkbox">跳舞<input type="checkbox" checked="checked">睡觉<input  type="checkbox" checked="checked"><br>

 运行结果

 maxlegth="XX"设置输入字段的最大值

用户名:<input type="text" maxlength="6"> <br>

 

 radio是一组时必须命名相同的名字,即name一致

<input type="radio" name="sex">女

<input type="radio" name="sex">男

!-- 点击了提交按钮,可以把表单域form的表单元素提交给后台服务器-->
       <input type="submit" value="注册">
       <!-- reset重置按钮还原表单元素初始的默认状态 -->
       <input type="reset" value="重新填写"><br>

  <!-- 普通按钮button 后期与JS结合使用 -->
       <input type="button" value="获取短信验证码"><br>
       <!-- 文件域使用,上传文件使用 -->
       <input  type="file">

 

 (2)label标签

<label>是元素定义标注,用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转移到对应的表单元素上以增加用户体验

基本语法:

<!-- label标签的for属性与相关元素的id属性相同 -->
       <label for="sex">男</label>
       <input type="radio" name="sex" id="sex">
       <label for="text">用户名</label>
       <input type="text" id="text"><br>

2.select下拉表单元素

节约空间,让用户进行选择,双标签

基本语法:

<select>

<option>xxx</option>

<option>xxx</option>

</select>

示例

专业:
       <select>
           <option>计算机科学与技术</option>
           <option>通信工程</option>
           <option>物联网工程</option>
       </select>

结果

 

 注意:<select>中至少包含一对<option>

在<option>中定义selected="selected"时,表示当前选项为默认项

例如

国籍:
       <select>
           <option selected="selected">中国</option>
           <option>美国</option>
           <option>日本</option>
           <option>俄罗斯</option>
           </select>

3.textarea文本域元素

<textarea>文本域可以定义多行输入的情况,适合留言,双标签

基本语法:

<textarea>

</textarea>

今日学习感想:
            <textarea>

            </textarea><br>
            留言栏
            <textarea col="50",row="6">
                今天想吃虾仁番茄面

            </textarea>

运行结果

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值