Many ways to Creating text box in html

content:

Trick 1: Create a text box using only HTML
Trick 2: Create a text box using HTML&CSS
methods 2
Trick 3: Create a text box using HTML & JavaScript
methods 2

There are many ways to creating text box in HTML, here are some tricks for making the text appear inside a box.

Trick 1: Create a text box using only HTML

 <fieldset>
    <legend>title : </legend>
   text..........
  </fieldset>

Trick 2: Create a text box using HTML&CSS

There are two methods, create DIV or any TAG and then add a STYLE to it as follows:

method 1

specific tag:

 <div style="border: 1px solid red; padding:2px">
  write your text here.......
   </div>

or:

 <div style="box-shadow: 0 0 3px 1px; padding:2px">
  write your text here.......
 </div>

methods 2

specific tag:

 <html>
  <head>
    <style>.text-box{border: 1px solid red; padding:2px}</style>
  </head>
  <body>
    <div class="text-box">write your text here.........</div>
    <br>
<p class="text-box">write your scend text here.........</p>
  
  </body>
</html>

Trick 3: Create a text box using HTML & JavaScript

methods 1

 <p>text 1.................</p>

<p>text 2......................</p>

<script>
  //<![CDATA[
  var par = document.getElementsByTagName("p");
    var p;
  for(p=0; p<par.length; p++){
  par[p].setAttribute("style","border: 1px solid red; padding:2px") 
     }
//]]>
 </script>

methods 2

also, can you create style of specific class or tag with JavaScript

 <body>
  
<p>
  text.............
</p>

<div class="text-box">
  text...............
  </div>


<!--by tag-->
<script>
  var sty = document.createElement("style");
sty.innerHTML = "p{border: 1px solid red; padding:2px}";
  document.body.appendChild(sty);
</script>
  <!--by class-->
  <script>
  var sty1 = document.createElement("style");
sty1.innerHTML = ".text-box{border: 1px solid red; padding:2px}";
  document.body.appendChild(sty1);
</script>
  
  </body>

☷✎

Many ways to Creating text box in html

Trick 1: Create a text box using only HTML

Trick 2: Create a text box using HTML&CSS

method 1

specific tag:

methods 2

Trick 3: Create a text box using HTML & JavaScript

methods 2

Comments

Post a Comment

Meta keywords generator tool for Blogger

Custom permalink creator for blogger

Create direct download link for google drive file online

Robots txt file generator, blogger seo tools

GIMP: A Powerful Open-Source Image Editing Software

Many ways to Creating text box in html

Trick 1: Create a text box using only HTML

Trick 2: Create a text box using HTML&CSS

method 1

specific tag:

methods 2

Trick 3: Create a text box using HTML & JavaScript

methods 2

Related

Comments

Post a Comment